diff --git a/package.json b/package.json
index 009d202c3d7..4f6a22c06f0 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
       "prettier --write --ignore-unknown"
     ],
     "*.less": [
-      "stylelint --syntax less --fix"
+      "stylelint --customSyntax postcss-less --fix"
     ],
     "*.js": [
       "prettier --write"
diff --git a/sites/x6-sites/package.json b/sites/x6-sites/package.json
index 47ada9d8ba9..f8181570018 100644
--- a/sites/x6-sites/package.json
+++ b/sites/x6-sites/package.json
@@ -31,9 +31,9 @@
     "@antv/x6-plugin-transform": "^2.x",
     "@antv/x6-react-components": "^2.x",
     "@antv/x6-react-shape": "^2.x",
-    "antd": "^4.4.2",
+    "antd": "^5.0.0",
     "dagre": "^0.8.5",
-    "dumi": "2.0.16",
+    "dumi": "^2.1.14",
     "elkjs": "^0.8.2",
     "highlight.js": "^10.1.2",
     "react": "^18.0.0",
diff --git a/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.less b/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.less
index 12f9aa77dd5..89fffb7f285 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.less
+++ b/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.less
@@ -1,29 +1,26 @@
-.app {
+.auto-resize-app {
   display: flex;
   width: 600px;
   height: 400px;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
-}
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 
-.full {
-  width: 100%;
-  height: 100%;
+  .full {
+    width: 100%;
+    height: 100%;
+  }
 }
 
-:global {
-  .x6-split-box-horizontal > .x6-split-box-resizer,
-  .x6-split-box-vertical > .x6-split-box-resizer {
-    background: #e3e6e9;
-  }
-}
\ No newline at end of file
+.x6-split-box-horizontal > .x6-split-box-resizer,
+.x6-split-box-vertical > .x6-split-box-resizer {
+  background: #e3e6e9;
+}
diff --git a/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.tsx b/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.tsx
index 57c8be3c478..9114058d528 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/graph/auto-resize/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { SplitBox } from '@antv/x6-react-components'
 import '@antv/x6-react-components/es/split-box/style/index.css'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container1: HTMLDivElement
@@ -50,16 +50,16 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
+      <div className="auto-resize-app">
         <SplitBox split="horizontal">
-          <div className={styles.full}>
+          <div className="full">
             <div ref={this.refContainer1} />
           </div>
           <SplitBox split="vertical">
-            <div className={styles.full}>
+            <div className="full">
               <div ref={this.refContainer2} />
             </div>
-            <div className={styles.full}>
+            <div className="full">
               <div ref={this.refContainer3} />
             </div>
           </SplitBox>
diff --git a/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.less b/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.less
index ab49baa2d92..622f89cf41e 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.less
+++ b/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.less
@@ -1,15 +1,15 @@
-.app {
+.backgournd-grid-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.tsx b/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.tsx
index 7bbfae7f6ad..eac85b600c8 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/graph/background-grid/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const data = {
   nodes: [
@@ -93,8 +93,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="backgournd-grid-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.less b/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.less
index ab49baa2d92..dde2d72d361 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.less
+++ b/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.less
@@ -1,15 +1,15 @@
-.app {
+.panning-mousewheel-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.tsx b/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.tsx
index 721f7959e35..5c341b25a0a 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/graph/panning-mousewheel/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const data = {
   nodes: [
@@ -98,8 +98,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="panning-mousewheel-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/graph/transform/index.less b/sites/x6-sites/src/tutorial/basic/graph/transform/index.less
index 8848a26538d..628eabaeb03 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/transform/index.less
+++ b/sites/x6-sites/src/tutorial/basic/graph/transform/index.less
@@ -1,21 +1,20 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.transform-app {
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  height: 240px;
-  margin-top: 16px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  .app-content {
+    width: 100%;
+    height: 240px;
+    margin-top: 16px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/graph/transform/index.tsx b/sites/x6-sites/src/tutorial/basic/graph/transform/index.tsx
index 289735247cf..7106d937983 100644
--- a/sites/x6-sites/src/tutorial/basic/graph/transform/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/graph/transform/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
 import { Button } from 'antd'
-
-import styles from './index.less'
+import './index.less'
 
 const data = {
   nodes: [
@@ -150,8 +149,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="transform-app">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.transform(item.key)} key={item.key}>
@@ -160,7 +159,7 @@ export default class Example extends React.Component {
             ))}
           </Button.Group>
         </div>
-        <div className={styles['app-content']} ref={this.refContainer} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/getting-started/helloworld/index.less b/sites/x6-sites/src/tutorial/getting-started/helloworld/index.less
index 18cbf20415b..bd26d45f25e 100644
--- a/sites/x6-sites/src/tutorial/getting-started/helloworld/index.less
+++ b/sites/x6-sites/src/tutorial/getting-started/helloworld/index.less
@@ -1,14 +1,15 @@
-.app {
+.helloworld-app {
   display: flex;
+  width: 100%;
   padding: 0;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
-}
\ No newline at end of file
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
+}
diff --git a/sites/x6-sites/src/tutorial/getting-started/helloworld/index.tsx b/sites/x6-sites/src/tutorial/getting-started/helloworld/index.tsx
index 9fa37b5edf1..b9add780f64 100644
--- a/sites/x6-sites/src/tutorial/getting-started/helloworld/index.tsx
+++ b/sites/x6-sites/src/tutorial/getting-started/helloworld/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const data = {
   nodes: [
@@ -81,8 +81,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="helloworld-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/getting-started/react-shape/index.less b/sites/x6-sites/src/tutorial/getting-started/react-shape/index.less
index a81aaafbe15..3c7180ea057 100644
--- a/sites/x6-sites/src/tutorial/getting-started/react-shape/index.less
+++ b/sites/x6-sites/src/tutorial/getting-started/react-shape/index.less
@@ -1,31 +1,31 @@
-.app {
+.react-shape-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
-}
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 
-.custom-react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
-}
+  .custom-react-node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #8f8f8f;
+    border-radius: 6px;
+  }
 
-.custom-react-node span {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
+  .custom-react-node span {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/getting-started/react-shape/index.tsx b/sites/x6-sites/src/tutorial/getting-started/react-shape/index.tsx
index 4206e7be3a6..1a3da1b515e 100644
--- a/sites/x6-sites/src/tutorial/getting-started/react-shape/index.tsx
+++ b/sites/x6-sites/src/tutorial/getting-started/react-shape/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph, Node } from '@antv/x6'
 import { register } from '@antv/x6-react-shape'
 import { Dropdown } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const CustomComponent = ({ node }: { node: Node }) => {
   const label = node.prop('label')
@@ -26,7 +26,7 @@ const CustomComponent = ({ node }: { node: Node }) => {
       }}
       trigger={['contextMenu']}
     >
-      <div className={styles['custom-react-node']}>{label}</div>
+      <div className="custom-react-node">{label}</div>
     </Dropdown>
   )
 }
@@ -92,8 +92,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="react-shape-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.less b/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.less
index 118ae06c492..5d032408d07 100644
--- a/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.less
+++ b/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.less
@@ -1,25 +1,25 @@
-.app {
+.use-plugin-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 5px;
-  box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
-}
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 
-.custom-react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
+  .custom-react-node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #8f8f8f;
+    border-radius: 6px;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.tsx b/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.tsx
index 24dcf44b2bf..ab2040a2c2a 100644
--- a/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.tsx
+++ b/sites/x6-sites/src/tutorial/getting-started/use-plugin/index.tsx
@@ -3,8 +3,7 @@ import { Graph, Node } from '@antv/x6'
 import { register } from '@antv/x6-react-shape'
 import { Dropdown } from 'antd'
 import { Snapline } from '@antv/x6-plugin-snapline'
-
-import styles from './index.less'
+import './index.less'
 
 const CustomComponent = ({ node }: { node: Node }) => {
   const label = node.prop('label')
@@ -28,7 +27,7 @@ const CustomComponent = ({ node }: { node: Node }) => {
       }}
       trigger={['contextMenu']}
     >
-      <div className={styles['custom-react-node']}>{label}</div>
+      <div className="custom-react-node">{label}</div>
     </Dropdown>
   )
 }
@@ -99,8 +98,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="use-plugin-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }