diff --git a/sites/x6-sites/src/tutorial/basic/edge/connector/index.less b/sites/x6-sites/src/tutorial/basic/edge/connector/index.less
index 2b520bbc8c7..ad38b9d7fcb 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/connector/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/connector/index.less
@@ -1,14 +1,14 @@
-.app {
+.connector-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/connector/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/connector/index.tsx
index d7da332dcd4..c7b3a5fb6bf 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/connector/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/connector/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -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="connector-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.less b/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.less
index 2b520bbc8c7..df81e82f983 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.less
@@ -1,14 +1,14 @@
-.app {
+.custom-marker-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.tsx
index 01c08f115a4..29e3c10f100 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/custom-marker/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -43,8 +43,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="custom-marker-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/labels/index.less b/sites/x6-sites/src/tutorial/basic/edge/labels/index.less
index 2b520bbc8c7..809dc4ea603 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/labels/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/labels/index.less
@@ -1,14 +1,14 @@
-.app {
+.labels-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/labels/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/labels/index.tsx
index 6a65e196c00..2b1d96dbb0d 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/labels/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/labels/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -106,8 +106,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="labels-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.less b/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.less
index 2b520bbc8c7..1bdffdeaa5d 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.less
@@ -1,14 +1,14 @@
-.app {
+.native-marker-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.tsx
index b5632b167d8..ff655975853 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/native-marker/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const markers = [
   'block',
@@ -47,8 +47,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="native-marker-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/prop/index.less b/sites/x6-sites/src/tutorial/basic/edge/prop/index.less
index 8848a26538d..b6e2d5c03a9 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/prop/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/prop/index.less
@@ -1,21 +1,19 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.prop-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 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: 0;
+    margin-top: 16px;
+    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/edge/prop/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/prop/index.tsx
index 0aa651deb4d..5aeea6df8e9 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/prop/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/prop/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Color } from '@antv/x6'
 import { Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const commands = [
   {
@@ -103,8 +103,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="prop-app">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.change(item.key)} key={item.key}>
@@ -113,7 +113,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/basic/edge/registry/index.less b/sites/x6-sites/src/tutorial/basic/edge/registry/index.less
index 2571637d536..d7148b67c10 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/registry/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/registry/index.less
@@ -1,15 +1,15 @@
-.app {
+.registry-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%);
-}
\ 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/basic/edge/registry/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/registry/index.tsx
index 09aee455acf..928b4044106 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/registry/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/registry/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerEdge('double-edge', {
   inherit: 'edge',
@@ -134,8 +134,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="registry-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/router/index.less b/sites/x6-sites/src/tutorial/basic/edge/router/index.less
index 2b520bbc8c7..68e033e5f2f 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/router/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/router/index.less
@@ -1,14 +1,14 @@
-.app {
+.router-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/router/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/router/index.tsx
index 665c5ad9db2..b1d94a087b9 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/router/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/router/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -91,8 +91,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="router-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/vertices/index.less b/sites/x6-sites/src/tutorial/basic/edge/vertices/index.less
index 2b520bbc8c7..96aa592a1e5 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/vertices/index.less
+++ b/sites/x6-sites/src/tutorial/basic/edge/vertices/index.less
@@ -1,14 +1,14 @@
-.app {
+.vertices-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/edge/vertices/index.tsx b/sites/x6-sites/src/tutorial/basic/edge/vertices/index.tsx
index b7cf2d7bcc5..2cbe8e5982c 100644
--- a/sites/x6-sites/src/tutorial/basic/edge/vertices/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/edge/vertices/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -90,8 +90,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="vertices-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/event/custom-click/index.less b/sites/x6-sites/src/tutorial/basic/event/custom-click/index.less
index 49d1703b725..05a94ae73f6 100644
--- a/sites/x6-sites/src/tutorial/basic/event/custom-click/index.less
+++ b/sites/x6-sites/src/tutorial/basic/event/custom-click/index.less
@@ -1,14 +1,14 @@
-.app {
+.custom-click-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 200px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 200px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/event/custom-click/index.tsx b/sites/x6-sites/src/tutorial/basic/event/custom-click/index.tsx
index a0afe165728..20815bd201d 100644
--- a/sites/x6-sites/src/tutorial/basic/event/custom-click/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/event/custom-click/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-click-node',
@@ -134,8 +134,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="custom-click-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.less b/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.less
index 7b89230044c..17f1a3ee4fb 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.less
+++ b/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.less
@@ -1,45 +1,18 @@
-.app {
+.connecting-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
-
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-side {
+    bottom: 0;
+    height: 100%;
+    padding: 0 8px;
+  }
 
-:global {
-  .ant-card {
-    min-height: 250px;
+  .app-content {
+    flex: 1;
+    margin-top: 0;
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
-  .ant-card-head-title {
-    text-align: center;
-  }
-  
-  .ant-row {
-    margin: 16px 0;
-    text-align: left;
-  }
-}
-
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
 }
diff --git a/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.tsx b/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.tsx
index 97574a5cf15..1c7068ebcef 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/interacting/connecting/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -192,11 +192,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="connecting-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingChanged} />
         </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/basic/interacting/embedding/index.less b/sites/x6-sites/src/tutorial/basic/interacting/embedding/index.less
index 2b520bbc8c7..3a602abba15 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/embedding/index.less
+++ b/sites/x6-sites/src/tutorial/basic/interacting/embedding/index.less
@@ -1,14 +1,14 @@
-.app {
+.embedding-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/interacting/embedding/index.tsx b/sites/x6-sites/src/tutorial/basic/interacting/embedding/index.tsx
index 59966c1861c..d329e3d709d 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/embedding/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/interacting/embedding/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -94,8 +94,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="embedding-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.less b/sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.less
index ab49baa2d92..a52ef65db9e 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.less
+++ b/sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.less
@@ -1,15 +1,15 @@
-.app {
+.highlighting-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/interacting/highlighting/index.tsx b/sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.tsx
index 1017791d57b..542bc9ab288 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/interacting/highlighting/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -142,8 +142,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="highlighting-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.less b/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.less
index 7b89230044c..fbb8d1bce26 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.less
+++ b/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.less
@@ -1,36 +1,33 @@
-.app {
+.interacting-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
+  .app-side {
+    bottom: 0;
+    height: 100%;
+    padding: 0 8px;
+  }
+
+  .app-content {
+    flex: 1;
+    margin-top: 0;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
+.ant-card {
+  min-height: 250px;
   box-shadow: 0 0 10px 1px #e9e9e9;
 }
 
-:global {
-  .ant-card {
-    min-height: 250px;
-    box-shadow: 0 0 10px 1px #e9e9e9;
-  }
-  
-  .ant-card-head-title {
-    text-align: center;
-  }
-  
-  .ant-row {
-    margin: 16px 0;
-    text-align: left;
-  }
+.ant-card-head-title {
+  text-align: center;
+}
+
+.ant-row {
+  margin: 16px 0;
+  text-align: left;
 }
 
 .slider-value {
diff --git a/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.tsx b/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.tsx
index 96c6f1d1f0d..132b7de3ebe 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/interacting/interacting/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -193,11 +193,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="interacting-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingChanged} />
         </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/basic/interacting/validate/index.less b/sites/x6-sites/src/tutorial/basic/interacting/validate/index.less
index ab49baa2d92..9235b21cb1f 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/validate/index.less
+++ b/sites/x6-sites/src/tutorial/basic/interacting/validate/index.less
@@ -1,15 +1,15 @@
-.app {
+.validate-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/interacting/validate/index.tsx b/sites/x6-sites/src/tutorial/basic/interacting/validate/index.tsx
index d6c0474c8ed..c99a43b8dcd 100644
--- a/sites/x6-sites/src/tutorial/basic/interacting/validate/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/interacting/validate/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -196,8 +196,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="validate-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/node/prop/index.less b/sites/x6-sites/src/tutorial/basic/node/prop/index.less
index 8848a26538d..90e027ac9be 100644
--- a/sites/x6-sites/src/tutorial/basic/node/prop/index.less
+++ b/sites/x6-sites/src/tutorial/basic/node/prop/index.less
@@ -1,21 +1,19 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.node-prop-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 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: 0;
+    margin-top: 16px;
+    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/node/prop/index.tsx b/sites/x6-sites/src/tutorial/basic/node/prop/index.tsx
index 8b4a65dd450..6ea7fbbf5ae 100644
--- a/sites/x6-sites/src/tutorial/basic/node/prop/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/node/prop/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Color } from '@antv/x6'
 import { Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -123,8 +123,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="node-prop-app ">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.change(item.key)} key={item.key}>
@@ -133,7 +133,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/basic/node/registry/index.less b/sites/x6-sites/src/tutorial/basic/node/registry/index.less
index ab49baa2d92..d7148b67c10 100644
--- a/sites/x6-sites/src/tutorial/basic/node/registry/index.less
+++ b/sites/x6-sites/src/tutorial/basic/node/registry/index.less
@@ -1,15 +1,15 @@
-.app {
+.registry-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/node/registry/index.tsx b/sites/x6-sites/src/tutorial/basic/node/registry/index.tsx
index 9358d172f3c..5cf43c64fd9 100644
--- a/sites/x6-sites/src/tutorial/basic/node/registry/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/node/registry/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -88,8 +88,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="registry-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/node/shapes/index.less b/sites/x6-sites/src/tutorial/basic/node/shapes/index.less
index ab49baa2d92..ae6ba503538 100644
--- a/sites/x6-sites/src/tutorial/basic/node/shapes/index.less
+++ b/sites/x6-sites/src/tutorial/basic/node/shapes/index.less
@@ -1,15 +1,15 @@
-.app {
+.shapes-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/node/shapes/index.tsx b/sites/x6-sites/src/tutorial/basic/node/shapes/index.tsx
index badfe1b6cb3..6341b3dd7bc 100644
--- a/sites/x6-sites/src/tutorial/basic/node/shapes/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/node/shapes/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 const commonAttrs = {
   body: {
@@ -116,8 +116,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="shapes-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/ports/config/index.less b/sites/x6-sites/src/tutorial/basic/ports/config/index.less
index ab49baa2d92..5ec75d2839c 100644
--- a/sites/x6-sites/src/tutorial/basic/ports/config/index.less
+++ b/sites/x6-sites/src/tutorial/basic/ports/config/index.less
@@ -1,15 +1,15 @@
-.app {
+.config-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/ports/config/index.tsx b/sites/x6-sites/src/tutorial/basic/ports/config/index.tsx
index 4ab83f8c6aa..aba2125cacc 100644
--- a/sites/x6-sites/src/tutorial/basic/ports/config/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/ports/config/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -114,8 +114,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="config-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/basic/ports/dynamic/index.less b/sites/x6-sites/src/tutorial/basic/ports/dynamic/index.less
index 8848a26538d..d4b1f57c315 100644
--- a/sites/x6-sites/src/tutorial/basic/ports/dynamic/index.less
+++ b/sites/x6-sites/src/tutorial/basic/ports/dynamic/index.less
@@ -1,21 +1,19 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.dynamic-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 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: 0;
+    margin-top: 16px;
+    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/ports/dynamic/index.tsx b/sites/x6-sites/src/tutorial/basic/ports/dynamic/index.tsx
index 7b7dc7bfb6e..cc017cf1cf2 100644
--- a/sites/x6-sites/src/tutorial/basic/ports/dynamic/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/ports/dynamic/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Node, Color } from '@antv/x6'
 import { Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node-width-port',
@@ -128,8 +128,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="dynamic-app">
+        <div className="app-btns">
           <Button.Group>
             {commands.map((item) => (
               <Button onClick={() => this.change(item.key)} key={item.key}>
@@ -138,7 +138,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/basic/serialization/to-json/index.less b/sites/x6-sites/src/tutorial/basic/serialization/to-json/index.less
index 68abffdd398..fcc6b3d2d82 100644
--- a/sites/x6-sites/src/tutorial/basic/serialization/to-json/index.less
+++ b/sites/x6-sites/src/tutorial/basic/serialization/to-json/index.less
@@ -1,19 +1,18 @@
-.app {
+.to-json-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  width: 320px;
-  height: 280px;
-  overflow: auto;
-}
+  .app-side {
+    width: 320px;
+    height: 280px;
+    overflow: auto;
+  }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/basic/serialization/to-json/index.tsx b/sites/x6-sites/src/tutorial/basic/serialization/to-json/index.tsx
index 6d42d7a660e..36fd04787f5 100644
--- a/sites/x6-sites/src/tutorial/basic/serialization/to-json/index.tsx
+++ b/sites/x6-sites/src/tutorial/basic/serialization/to-json/index.tsx
@@ -3,7 +3,7 @@ import { Graph } from '@antv/x6'
 import hljs from 'highlight.js/lib/core'
 import json from 'highlight.js/lib/languages/json'
 import 'highlight.js/styles/github.css'
-import styles from './index.less'
+import './index.less'
 
 hljs.registerLanguage('json', json)
 
@@ -86,13 +86,13 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="to-json-app">
+        <div className="app-side">
           <pre>
             <code className="language-json" ref={this.refCode} />
           </pre>
         </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/intermediate/connection-point/multi/index.less b/sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.less
index ab49baa2d92..dc3b491c1d5 100644
--- a/sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.less
@@ -1,15 +1,15 @@
-.app {
+.multi-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/intermediate/connection-point/multi/index.tsx b/sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.tsx
index 114ee7d58d0..da950f12f37 100644
--- a/sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/connection-point/multi/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-node',
@@ -136,8 +136,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="multi-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.less b/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.less
index 3dea1451ed1..3989d7de6c8 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.less
@@ -1,14 +1,14 @@
-.app {
+.collapsable-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 360px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 360px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.tsx b/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.tsx
index b223d9d0b69..b163341b1c6 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/group/collapsable/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
 import { Group } from './shape'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-group-node',
@@ -146,8 +146,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="collapsable-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.less b/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.less
index 033b3e8341a..e93f09f5229 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.less
@@ -1,14 +1,14 @@
-.app {
+.embed-edge-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.tsx b/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.tsx
index 8509cb9f1be..5ce474adf88 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/group/embed-edge/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-group-node',
@@ -82,8 +82,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="embed-edge-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.less b/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.less
index dd80fd8c952..fb1f8aeccd6 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.less
@@ -1,45 +1,42 @@
-.app {
+.expand-shrink-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+
+  .slider-value {
+    display: inline-block;
+    margin-left: 8px;
+    padding: 3px 7px;
+    color: #333;
+    font-size: 12px;
+    line-height: 1.25;
+    background: #eee;
+    border-radius: 10px;
+  }
 
-:global {
   .ant-card {
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
+
   .ant-card-head-title {
     text-align: center;
   }
-  
+
   .ant-row {
     margin: 16px 0;
     text-align: left;
   }
 }
-
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
-}
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.tsx b/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.tsx
index fa0a2b10c9a..3693d8b46da 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Graph, Dom } from '@antv/x6'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-group-node',
@@ -171,11 +171,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="expand-shrink-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingsChanged} />
         </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/intermediate/group/expand-shrink/settings.tsx b/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/settings.tsx
index 67af4749d3e..cc7ef3855f3 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/settings.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/group/expand-shrink/settings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Card, Row, Col, Slider } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -47,7 +47,7 @@ export class Settings extends React.Component<Props, State> {
             />
           </Col>
           <Col span={1} offset={1}>
-            <div className={styles['slider-value']}>{this.state.padding}</div>
+            <div className="slider-value">{this.state.padding}</div>
           </Col>
         </Row>
         <Row align="middle" style={{ borderTop: '1px solid #f0f0f0' }}>
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.less b/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.less
index 033b3e8341a..916521f6e7e 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.less
@@ -1,14 +1,14 @@
-.app {
+.restrict-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.tsx b/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.tsx
index 265b9834cea..2b70526befa 100644
--- a/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/group/restrict/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-group-node',
@@ -73,8 +73,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="restrict-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/html/basic/index.less b/sites/x6-sites/src/tutorial/intermediate/html/basic/index.less
index f4a1d10d9ed..623125a77b3 100644
--- a/sites/x6-sites/src/tutorial/intermediate/html/basic/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/html/basic/index.less
@@ -1,43 +1,42 @@
-.app {
+.html-basic-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
-
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
 
-.custom-html {
-  width: 100%;
-  height: 100%;
-  background: #333232;
-  border-radius: 1em;
-  box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
-    0 0.02125em 0.06125em rgb(0 0 0 / 25%);
-  perspective: 600px;
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 0;
+  .custom-html {
     width: 100%;
-    height: 50%;
-    background: #333232
-      linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
-    border-radius: 0 0 1em 1em;
-    transform: rotateX(180deg);
-    transform-origin: center top;
-    transition: 0.7s ease-in-out transform;
-    content: ' ';
-  }
+    height: 100%;
+    background: #333232;
+    border-radius: 1em;
+    box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
+      0 0.02125em 0.06125em rgb(0 0 0 / 25%);
+    perspective: 600px;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 50%;
+      background: #333232
+        linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
+      border-radius: 0 0 1em 1em;
+      transform: rotateX(180deg);
+      transform-origin: center top;
+      transition: 0.7s ease-in-out transform;
+      content: ' ';
+    }
 
-  &:hover::before {
-    transform: rotateX(0);
+    &:hover::before {
+      transform: rotateX(0);
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/sites/x6-sites/src/tutorial/intermediate/html/basic/index.tsx b/sites/x6-sites/src/tutorial/intermediate/html/basic/index.tsx
index 7c766ca8850..daf0e78dce1 100644
--- a/sites/x6-sites/src/tutorial/intermediate/html/basic/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/html/basic/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph, Shape } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Shape.HTML.register({
   shape: 'custom-html',
@@ -9,7 +9,7 @@ Shape.HTML.register({
   effect: ['data'],
   html() {
     const div = document.createElement('div')
-    div.className = styles['custom-html']
+    div.className = 'custom-html'
     return div
   },
 })
@@ -40,8 +40,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="html-basic-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/html/update/index.less b/sites/x6-sites/src/tutorial/intermediate/html/update/index.less
index f4a1d10d9ed..a12500c5e1c 100644
--- a/sites/x6-sites/src/tutorial/intermediate/html/update/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/html/update/index.less
@@ -1,43 +1,42 @@
-.app {
+.html-update-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
-
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
 
-.custom-html {
-  width: 100%;
-  height: 100%;
-  background: #333232;
-  border-radius: 1em;
-  box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
-    0 0.02125em 0.06125em rgb(0 0 0 / 25%);
-  perspective: 600px;
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 0;
+  .custom-html {
     width: 100%;
-    height: 50%;
-    background: #333232
-      linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
-    border-radius: 0 0 1em 1em;
-    transform: rotateX(180deg);
-    transform-origin: center top;
-    transition: 0.7s ease-in-out transform;
-    content: ' ';
-  }
+    height: 100%;
+    background: #333232;
+    border-radius: 1em;
+    box-shadow: 0 0.125em 0.3125em rgb(0 0 0 / 25%),
+      0 0.02125em 0.06125em rgb(0 0 0 / 25%);
+    perspective: 600px;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 50%;
+      background: #333232
+        linear-gradient(180deg, rgb(0 0 0 / 10%) 50%, rgb(0 0 0 / 40%));
+      border-radius: 0 0 1em 1em;
+      transform: rotateX(180deg);
+      transform-origin: center top;
+      transition: 0.7s ease-in-out transform;
+      content: ' ';
+    }
 
-  &:hover::before {
-    transform: rotateX(0);
+    &:hover::before {
+      transform: rotateX(0);
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/sites/x6-sites/src/tutorial/intermediate/html/update/index.tsx b/sites/x6-sites/src/tutorial/intermediate/html/update/index.tsx
index 3ba4911d918..bf34ebd46b8 100644
--- a/sites/x6-sites/src/tutorial/intermediate/html/update/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/html/update/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph, Shape, Color } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Shape.HTML.register({
   shape: 'custom-update-html',
@@ -10,7 +10,7 @@ Shape.HTML.register({
   html(cell) {
     const { color } = cell.getData()
     const div = document.createElement('div')
-    div.className = styles['custom-html']
+    div.className = 'custom-html'
     div.style.background = color
     return div
   },
@@ -51,8 +51,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="html-update-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/react/basic/index.less b/sites/x6-sites/src/tutorial/intermediate/react/basic/index.less
index 38e20f63fb3..9b957677717 100644
--- a/sites/x6-sites/src/tutorial/intermediate/react/basic/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/react/basic/index.less
@@ -1,24 +1,23 @@
-.app {
+.react-basic-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
+  .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/intermediate/react/basic/index.tsx b/sites/x6-sites/src/tutorial/intermediate/react/basic/index.tsx
index 62fdb254fe5..37a88c56bd9 100644
--- a/sites/x6-sites/src/tutorial/intermediate/react/basic/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/react/basic/index.tsx
@@ -2,11 +2,11 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { register } from '@antv/x6-react-shape'
 import { Progress } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const NodeComponent = () => {
   return (
-    <div className={styles['react-node']}>
+    <div className="react-node">
       <Progress type="circle" percent={30} width={80} />
     </div>
   )
@@ -45,8 +45,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-basic-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/react/portal/index.less b/sites/x6-sites/src/tutorial/intermediate/react/portal/index.less
index d1632ab5034..5b3dfb7a463 100644
--- a/sites/x6-sites/src/tutorial/intermediate/react/portal/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/react/portal/index.less
@@ -1,31 +1,29 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.react-portal-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 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: 0;
+    margin-top: 16px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
 
-.react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
+  .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/intermediate/react/portal/index.tsx b/sites/x6-sites/src/tutorial/intermediate/react/portal/index.tsx
index 8089552e8fd..2f971ac93b0 100644
--- a/sites/x6-sites/src/tutorial/intermediate/react/portal/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/react/portal/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { register, Portal } from '@antv/x6-react-shape'
 import { Progress, Button } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const X6ReactPortalProvider = Portal.getProvider() // 注意，一个 graph 只能申明一个 portal provider
 const ProgressContext = React.createContext(30)
@@ -10,7 +10,7 @@ const ProgressContext = React.createContext(30)
 const NodeComponent = () => {
   const progress = React.useContext(ProgressContext)
   return (
-    <div className={styles['react-node']}>
+    <div className="react-node">
       <Progress type="circle" percent={progress} width={80} />
     </div>
   )
@@ -59,14 +59,14 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
+      <div className="react-portal-app">
         <ProgressContext.Provider value={this.state.progress}>
           <X6ReactPortalProvider />
         </ProgressContext.Provider>
-        <div className={styles['app-btns']}>
+        <div className="app-btns">
           <Button onClick={this.changeProgress}>Add</Button>
         </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/intermediate/react/update/index.less b/sites/x6-sites/src/tutorial/intermediate/react/update/index.less
index 38e20f63fb3..177e8f770c7 100644
--- a/sites/x6-sites/src/tutorial/intermediate/react/update/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/react/update/index.less
@@ -1,24 +1,23 @@
-.app {
+.react-update-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.react-node {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
+  .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/intermediate/react/update/index.tsx b/sites/x6-sites/src/tutorial/intermediate/react/update/index.tsx
index 7bd2b5b1ad2..34bfa9c6a95 100644
--- a/sites/x6-sites/src/tutorial/intermediate/react/update/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/react/update/index.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import { Graph, Node } from '@antv/x6'
 import { register } from '@antv/x6-react-shape'
 import { Progress } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 const NodeComponent = ({ node }: { node: Node }) => {
   const { progress } = node.getData()
   return (
-    <div className={styles['react-node']}>
+    <div className="react-node">
       <Progress type="circle" percent={progress} width={80} />
     </div>
   )
@@ -57,8 +57,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-update-app ">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.less b/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.less
index 2b520bbc8c7..2d6a35fa198 100644
--- a/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.less
@@ -1,14 +1,14 @@
-.app {
+.tools-basic-app {
   display: flex;
+  width: 100%;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.tsx b/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.tsx
index c2428844e71..2b2091d309b 100644
--- a/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/tools/basic/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-tools-node',
@@ -70,8 +70,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="tools-basic-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.less b/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.less
index 2b520bbc8c7..be3a20a9acb 100644
--- a/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.less
+++ b/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.less
@@ -1,14 +1,13 @@
-.app {
+.tools-onhover-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 320px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    flex: 1;
+    height: 320px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.tsx b/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.tsx
index e72165d94dd..dc3096f4e40 100644
--- a/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.tsx
+++ b/sites/x6-sites/src/tutorial/intermediate/tools/onhover/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Graph } from '@antv/x6'
-import styles from './index.less'
+import './index.less'
 
 Graph.registerNode(
   'custom-tools-node',
@@ -99,8 +99,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="tools-onhover-app">
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/plugins/clipboard/index.less b/sites/x6-sites/src/tutorial/plugins/clipboard/index.less
index 1edab2bdf64..cd5f5cd24af 100644
--- a/sites/x6-sites/src/tutorial/plugins/clipboard/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/clipboard/index.less
@@ -1,28 +1,36 @@
-.app {
+.clipboard-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
-
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
 
-.app-btns {
-  display: flex;
-  margin-top: 16px;
-}
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
+
+    .slider-value {
+      display: inline-block;
+      margin-left: 8px;
+      padding: 3px 7px;
+      color: #333;
+      font-size: 12px;
+      line-height: 1.25;
+      background: #eee;
+      border-radius: 10px;
+    }
+
+    .app-btns {
+      display: flex;
+      margin-top: 16px;
+    }
+  }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-:global {
   .ant-btn {
     flex: 1;
     margin-right: 8px;
@@ -35,11 +43,11 @@
   .ant-card {
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
+
   .ant-card-head-title {
     text-align: center;
   }
-  
+
   .ant-row {
     margin: 16px 0;
     text-align: left;
@@ -48,19 +56,8 @@
   .x6-widget-selection-box {
     border: 2px dashed #239edd;
   }
-  
+
   .x6-widget-selection-inner {
     border: 1px solid #239edd;
   }
 }
-
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
-}
diff --git a/sites/x6-sites/src/tutorial/plugins/clipboard/index.tsx b/sites/x6-sites/src/tutorial/plugins/clipboard/index.tsx
index dc1c6fab163..33a17b0c2ad 100644
--- a/sites/x6-sites/src/tutorial/plugins/clipboard/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/clipboard/index.tsx
@@ -4,7 +4,7 @@ import { Graph } from '@antv/x6'
 import { Clipboard } from '@antv/x6-plugin-clipboard'
 import { Selection } from '@antv/x6-plugin-selection'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -126,10 +126,10 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="clipboard-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingsChanged} />
-          <div className={styles['app-btns']}>
+          <div className="app-btns">
             <Button onClick={this.onCopy} type="primary">
               Copy Selected Cells
             </Button>
@@ -138,7 +138,7 @@ export default class Example extends React.Component {
             </Button>
           </div>
         </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/plugins/clipboard/settings.tsx b/sites/x6-sites/src/tutorial/plugins/clipboard/settings.tsx
index ec43295b393..5ea37dd34b6 100644
--- a/sites/x6-sites/src/tutorial/plugins/clipboard/settings.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/clipboard/settings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox, Slider, Card, Row, Col } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -50,7 +50,7 @@ export class Settings extends React.Component<Props, State> {
         <Row align="middle">
           <Col span={8}>Paste Offset</Col>
           <Col span={2} offset={1}>
-            <div className={styles['slider-value']}>{this.state.offset}</div>
+            <div className="slider-value">{this.state.offset}</div>
           </Col>
         </Row>
         <Row align="middle">
diff --git a/sites/x6-sites/src/tutorial/plugins/dnd/index.less b/sites/x6-sites/src/tutorial/plugins/dnd/index.less
index c2c0d00138c..9f76624b05e 100644
--- a/sites/x6-sites/src/tutorial/plugins/dnd/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/dnd/index.less
@@ -1,46 +1,45 @@
-.app {
+.dnd-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-content {
-  flex: 1;
-  height: 240px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    height: 240px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.dnd-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 200px;
-  padding: 16px;
-  border: 1px solid #f0f0f0;
-  user-select: none;
-}
+  .dnd-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 200px;
+    padding: 16px;
+    border: 1px solid #f0f0f0;
+    user-select: none;
 
-.dnd-rect {
-  width: 100px;
-  height: 40px;
-  margin: 16px;
-  line-height: 40px;
-  text-align: center;
-  border: 1px solid #8f8f8f;
-  border-radius: 6px;
-  cursor: move;
-}
+    .dnd-rect {
+      width: 100px;
+      height: 40px;
+      margin: 16px;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #8f8f8f;
+      border-radius: 6px;
+      cursor: move;
+    }
 
-.dnd-circle {
-  width: 60px;
-  height: 60px;
-  margin: 16px;
-  line-height: 60px;
-  text-align: center;
-  border: 1px solid #8f8f8f;
-  border-radius: 100%;
-  cursor: move;
+    .dnd-circle {
+      width: 60px;
+      height: 60px;
+      margin: 16px;
+      line-height: 60px;
+      text-align: center;
+      border: 1px solid #8f8f8f;
+      border-radius: 100%;
+      cursor: move;
+    }
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/plugins/dnd/index.tsx b/sites/x6-sites/src/tutorial/plugins/dnd/index.tsx
index a09dbac216f..206dc4d5483 100644
--- a/sites/x6-sites/src/tutorial/plugins/dnd/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/dnd/index.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Dnd } from '@antv/x6-plugin-dnd'
 import { Snapline } from '@antv/x6-plugin-snapline'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private graph: Graph
@@ -130,25 +130,25 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['dnd-wrap']} ref={this.dndContainerRef}>
+      <div className="dnd-app">
+        <div className="dnd-wrap" ref={this.dndContainerRef}>
           <div
             data-type="rect"
-            className={styles['dnd-rect']}
+            className="dnd-rect"
             onMouseDown={this.startDrag}
           >
             Rect
           </div>
           <div
             data-type="circle"
-            className={styles['dnd-circle']}
+            className="dnd-circle"
             onMouseDown={this.startDrag}
           >
             Circle
           </div>
         </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/plugins/history/index.less b/sites/x6-sites/src/tutorial/plugins/history/index.less
index f65b76e34dd..02a10eac4c8 100644
--- a/sites/x6-sites/src/tutorial/plugins/history/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/history/index.less
@@ -1,20 +1,18 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.history-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-btns {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-btns {
+    bottom: 0;
+    margin: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  height: 240px;
-  margin-top: 16px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
+  .app-content {
+    width: 100%;
+    height: 240px;
+    margin: 0;
+    margin-top: 16px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/plugins/history/index.tsx b/sites/x6-sites/src/tutorial/plugins/history/index.tsx
index 7d7e56e6fe8..7c98e10ed1c 100644
--- a/sites/x6-sites/src/tutorial/plugins/history/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/history/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Button } from 'antd'
 import { Graph } from '@antv/x6'
 import { History } from '@antv/x6-plugin-history'
-import styles from './index.less'
+import './index.less'
 
 interface Props {}
 
@@ -75,8 +75,8 @@ export default class App extends React.Component<Props, State> {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-btns']}>
+      <div className="history-app">
+        <div className="app-btns">
           <Button.Group>
             <Button onClick={this.onUndo} disabled={!this.state.canUndo}>
               Undo
@@ -86,7 +86,7 @@ export default class App extends React.Component<Props, State> {
             </Button>
           </Button.Group>
         </div>
-        <div ref={this.refContainer} className={styles['app-content']} />
+        <div ref={this.refContainer} className="app-content" />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/plugins/keyboard/index.less b/sites/x6-sites/src/tutorial/plugins/keyboard/index.less
index 965b08b2654..4cf0f9c4b2f 100644
--- a/sites/x6-sites/src/tutorial/plugins/keyboard/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/keyboard/index.less
@@ -1,39 +1,36 @@
-.app {
-  display: flex;
-  flex-direction: column;
+.keyboard-app {
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-info {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-info {
+    bottom: 0;
+    margin: 0;
+    padding: 0 8px;
+  }
 
-.app-info span {
-  display: inline-block;
-  margin-right: 8px;
-  padding: 2px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  background: #e9e9e9;
-  border-radius: 4px;
-}
+  .app-info span {
+    display: inline-block;
+    margin-right: 8px;
+    padding: 2px 8px;
+    font-size: 12px;
+    line-height: 18px;
+    background: #e9e9e9;
+    border-radius: 4px;
+  }
 
-.app-content {
-  height: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    width: 100%;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-:global {
   .x6-widget-selection-box {
     border: 2px dashed #239edd;
   }
-  
+
   .x6-widget-selection-inner {
     border: 1px solid #239edd;
-  }  
-}
\ No newline at end of file
+  }
+}
diff --git a/sites/x6-sites/src/tutorial/plugins/keyboard/index.tsx b/sites/x6-sites/src/tutorial/plugins/keyboard/index.tsx
index 0fc1d863a40..0add2ec9905 100644
--- a/sites/x6-sites/src/tutorial/plugins/keyboard/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/keyboard/index.tsx
@@ -3,7 +3,7 @@ import { Graph } from '@antv/x6'
 import { Clipboard } from '@antv/x6-plugin-clipboard'
 import { Selection } from '@antv/x6-plugin-selection'
 import { Keyboard } from '@antv/x6-plugin-keyboard'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -120,14 +120,14 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-info']}>
+      <div className="keyboard-app">
+        <div className="app-info">
           <p>
             <span>Ctrl + C</span>Copy Cell
             <span style={{ marginLeft: 24 }}>Ctrl + V</span>Paste Cell
           </p>
         </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/plugins/minimap/index.less b/sites/x6-sites/src/tutorial/plugins/minimap/index.less
index 8aa780cf238..04ab1f1ee4c 100644
--- a/sites/x6-sites/src/tutorial/plugins/minimap/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/minimap/index.less
@@ -1,35 +1,32 @@
-.app {
+.minimap-app {
   display: flex;
   height: 320px;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
-
-.app-content {
-  flex: 1;
-  width: 400px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
 
-.x6-graph-scroller {
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    width: 400px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.app-minimap {
-  width: 200px;
-  height: 150px;
-  margin-top: -10px;
-}
+  .app-minimap {
+    width: 200px;
+    height: 150px;
+    margin-top: -10px;
+  }
 
-:global {
   .x6-widget-minimap-viewport {
     border: 2px solid #8f8f8f;
   }
-  
+
   .x6-widget-minimap-viewport-zoom {
     border: 2px solid #8f8f8f;
-  }  
-}
\ No newline at end of file
+  }
+
+  .x6-graph-scroller {
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+}
diff --git a/sites/x6-sites/src/tutorial/plugins/minimap/index.tsx b/sites/x6-sites/src/tutorial/plugins/minimap/index.tsx
index 8d0c2c70ab2..b7c5c7b4c49 100644
--- a/sites/x6-sites/src/tutorial/plugins/minimap/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/minimap/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Graph } from '@antv/x6'
 import { MiniMap } from '@antv/x6-plugin-minimap'
 import { Scroller } from '@antv/x6-plugin-scroller'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -109,9 +109,9 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-content']} ref={this.refContainer} />
-        <div className={styles['app-minimap']} ref={this.refMiniMapContainer} />
+      <div className="minimap-app">
+        <div className="app-content" ref={this.refContainer} />
+        <div className="app-minimap" ref={this.refMiniMapContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/plugins/scroller/index.less b/sites/x6-sites/src/tutorial/plugins/scroller/index.less
index 50b3d554444..0785ba29487 100644
--- a/sites/x6-sites/src/tutorial/plugins/scroller/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/scroller/index.less
@@ -1,64 +1,63 @@
-.app {
+.scroller-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
-
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
-
-.app-main {
-  display: flex;
-  flex-direction: column;
-  width: 600px;
-  margin-right: 8px;
-  margin-left: 8px;
-}
-
-.app-btns {
-  display: flex;
-  padding-top: 4px;
-  padding-bottom: 12px;
-}
-
-.app-btns .ant-btn {
-  flex: 1;
-  margin-right: 16px;
-}
-
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-}
-
-.x6-graph-scroller {
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
-
-.ant-card {
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
-
-.ant-card-head-title {
-  text-align: center;
-}
-
-.ant-row {
-  margin: 16px 0;
-  text-align: left;
-}
 
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
+
+    .slider-value {
+      display: inline-block;
+      margin-left: 8px;
+      padding: 3px 7px;
+      color: #333;
+      font-size: 12px;
+      line-height: 1.25;
+      background: #eee;
+      border-radius: 10px;
+    }
+  }
+
+  .app-main {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-right: 8px;
+    margin-left: 8px;
+
+    .app-btns {
+      display: flex;
+      padding-top: 4px;
+      padding-bottom: 12px;
+    }
+
+    .app-btns .ant-btn {
+      flex: 1;
+      margin-right: 16px;
+    }
+
+    .app-content {
+      flex: 1;
+      margin-right: 8px;
+      margin-left: 8px;
+    }
+  }
+
+  .x6-graph-scroller {
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+
+  .ant-card {
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+
+  .ant-card-head-title {
+    text-align: center;
+  }
+
+  .ant-row {
+    margin: 16px 0;
+    text-align: left;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/plugins/scroller/index.tsx b/sites/x6-sites/src/tutorial/plugins/scroller/index.tsx
index ce13210b13e..a30b2fde343 100644
--- a/sites/x6-sites/src/tutorial/plugins/scroller/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/scroller/index.tsx
@@ -3,7 +3,7 @@ import { Button } from 'antd'
 import { Graph } from '@antv/x6'
 import { Scroller } from '@antv/x6-plugin-scroller'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 const data = {
   hello: {
@@ -131,17 +131,17 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="scroller-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingsChanged} />
         </div>
-        <div className={styles['app-main']}>
-          <div className={styles['app-btns']}>
+        <div className="app-main">
+          <div className="app-btns">
             <Button onClick={this.onCenter}>Center Graph</Button>
             <Button onClick={this.onCenterContent}>Center Whole Content</Button>
             <Button onClick={this.onCenterCircle}>Center The Circle</Button>
           </div>
-          <div className={styles['app-content']} ref={this.refContainer} />
+          <div className="app-content" ref={this.refContainer} />
         </div>
       </div>
     )
diff --git a/sites/x6-sites/src/tutorial/plugins/scroller/settings.tsx b/sites/x6-sites/src/tutorial/plugins/scroller/settings.tsx
index ae6c211a46e..1b583f6427f 100644
--- a/sites/x6-sites/src/tutorial/plugins/scroller/settings.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/scroller/settings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox, Slider, Card, Row, Col } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -127,9 +127,7 @@ export class Settings extends React.Component<Props, State> {
             Min Visible Width
           </Col>
           <Col span={2} offset={1}>
-            <div className={styles['slider-value']}>
-              {this.state.minVisibleWidth}
-            </div>
+            <div className="slider-value">{this.state.minVisibleWidth}</div>
           </Col>
         </Row>
         <Row align="middle" style={{ marginTop: 0 }}>
@@ -155,9 +153,7 @@ export class Settings extends React.Component<Props, State> {
             Min Visible Height
           </Col>
           <Col span={2} offset={1}>
-            <div className={styles['slider-value']}>
-              {this.state.minVisibleHeight}
-            </div>
+            <div className="slider-value">{this.state.minVisibleHeight}</div>
           </Col>
         </Row>
         <Row align="middle" style={{ marginTop: 0 }}>
diff --git a/sites/x6-sites/src/tutorial/plugins/selection/index.less b/sites/x6-sites/src/tutorial/plugins/selection/index.less
index 5279dc42442..6da184ee51b 100644
--- a/sites/x6-sites/src/tutorial/plugins/selection/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/selection/index.less
@@ -1,40 +1,37 @@
-.app {
+.selection-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
+  }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-:global {
   .ant-card {
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
+
   .ant-card-head-title {
     text-align: center;
   }
-  
+
   .ant-row {
     margin: 16px 0;
     text-align: left;
   }
-  
+
   .x6-widget-selection-box {
     border: 2px dashed #239edd;
   }
-  
+
   .x6-widget-selection-inner {
     border: 1px solid #239edd;
   }
diff --git a/sites/x6-sites/src/tutorial/plugins/selection/index.tsx b/sites/x6-sites/src/tutorial/plugins/selection/index.tsx
index 1a1efc390d0..1877f9fbdca 100644
--- a/sites/x6-sites/src/tutorial/plugins/selection/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/selection/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Selection } from '@antv/x6-plugin-selection'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -112,11 +112,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="selection-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingChanged} />
         </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/plugins/snapline/index.less b/sites/x6-sites/src/tutorial/plugins/snapline/index.less
index 54cf8ab0b75..85c224fae39 100644
--- a/sites/x6-sites/src/tutorial/plugins/snapline/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/snapline/index.less
@@ -1,44 +1,41 @@
-.app {
+.snapline-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+    .slider-value {
+      display: inline-block;
+      margin-left: 8px;
+      padding: 3px 7px;
+      color: #333;
+      font-size: 12px;
+      line-height: 1.25;
+      background: #eee;
+      border-radius: 10px;
+    }
+  }
+
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-:global {
   .ant-card {
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
+
   .ant-card-head-title {
     text-align: center;
   }
-  
+
   .ant-row {
     margin: 16px 0;
     text-align: left;
   }
 }
-
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
-}
diff --git a/sites/x6-sites/src/tutorial/plugins/snapline/index.tsx b/sites/x6-sites/src/tutorial/plugins/snapline/index.tsx
index 1488caaa2ee..715056f93e0 100644
--- a/sites/x6-sites/src/tutorial/plugins/snapline/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/snapline/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Snapline } from '@antv/x6-plugin-snapline'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -108,11 +108,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="snapline-app">
+        <div className="app-side">
           <Settings onChange={this.onSnaplineChanged} />
         </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/plugins/snapline/settings.tsx b/sites/x6-sites/src/tutorial/plugins/snapline/settings.tsx
index 88a278ce108..6fe3df3c415 100644
--- a/sites/x6-sites/src/tutorial/plugins/snapline/settings.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/snapline/settings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox, Slider, Card, Row, Col } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -74,7 +74,7 @@ export class Settings extends React.Component<Props, State> {
         <Row align="middle">
           <Col span={6}>Tolerance</Col>
           <Col span={2} offset={1}>
-            <div className={styles['slider-value']}>{this.state.tolerance}</div>
+            <div className="slider-value">{this.state.tolerance}</div>
           </Col>
         </Row>
         <Row align="middle">
diff --git a/sites/x6-sites/src/tutorial/plugins/stencil/index.less b/sites/x6-sites/src/tutorial/plugins/stencil/index.less
index a55543fa312..31c25900a7c 100644
--- a/sites/x6-sites/src/tutorial/plugins/stencil/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/stencil/index.less
@@ -1,20 +1,19 @@
-.app {
+.stencil-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-stencil {
-  position: relative;
-  width: 200px;
-  border: 1px solid #f0f0f0;
-}
+  .app-stencil {
+    position: relative;
+    width: 200px;
+    border: 1px solid #f0f0f0;
+  }
 
-.app-content {
-  flex: 1;
-  height: 350px;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
\ No newline at end of file
+  .app-content {
+    flex: 1;
+    height: 350px;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+}
diff --git a/sites/x6-sites/src/tutorial/plugins/stencil/index.tsx b/sites/x6-sites/src/tutorial/plugins/stencil/index.tsx
index c61c48fd761..5bb793502ba 100644
--- a/sites/x6-sites/src/tutorial/plugins/stencil/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/stencil/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Snapline } from '@antv/x6-plugin-snapline'
 import { Stencil } from '@antv/x6-plugin-stencil'
-import styles from './index.less'
+import './index.less'
 
 const commonAttrs = {
   body: {
@@ -159,9 +159,9 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-stencil']} ref={this.refStencil} />
-        <div className={styles['app-content']} ref={this.refContainer} />
+      <div className="stencil-app">
+        <div className="app-stencil" ref={this.refStencil} />
+        <div className="app-content" ref={this.refContainer} />
       </div>
     )
   }
diff --git a/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.less b/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.less
index 64d4f47ecf2..8ff3d282efc 100644
--- a/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.less
@@ -1,67 +1,64 @@
-.app {
+.resizing-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+    .slider-value {
+      display: inline-block;
+      margin-left: 8px;
+      padding: 3px 7px;
+      color: #333;
+      font-size: 12px;
+      line-height: 1.25;
+      background: #eee;
+      border-radius: 10px;
+    }
+  }
 
-:global {
-  .ant-card {
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
-  .ant-card-head-title {
-    text-align: center;
+
+  .x6-widget-transform {
+    margin: -1px 0 0 -1px;
+    padding: 0;
+    border: 1px solid #239edd;
+    border-radius: 6px;
   }
-  
-  .ant-row {
-    margin: 16px 0;
-    text-align: left;
+
+  .x6-widget-transform > div {
+    border: 1px solid #239edd;
   }
-}
 
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
-}
+  .x6-widget-transform > div:hover {
+    background-color: #3dafe4;
+  }
 
-.x6-widget-transform {
-  margin: -1px 0 0 -1px;
-  padding: 0;
-  border: 1px solid #239edd;
-  border-radius: 6px;
-}
+  .x6-widget-transform-active-handle {
+    background-color: #3dafe4;
+  }
 
-.x6-widget-transform > div {
-  border: 1px solid #239edd;
-}
+  .x6-widget-transform-resize {
+    border-radius: 0;
+  }
 
-.x6-widget-transform > div:hover {
-  background-color: #3dafe4;
-}
+  .ant-card {
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
 
-.x6-widget-transform-active-handle {
-  background-color: #3dafe4;
-}
+  .ant-card-head-title {
+    text-align: center;
+  }
 
-.x6-widget-transform-resize {
-  border-radius: 0;
+  .ant-row {
+    margin: 16px 0;
+    text-align: left;
+  }
 }
diff --git a/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.tsx b/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.tsx
index 95402e010e4..10507449e8a 100644
--- a/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/transform/resizing/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Transform } from '@antv/x6-plugin-transform'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -95,11 +95,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="resizing-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingChanged} />
         </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/plugins/transform/resizing/settings.tsx b/sites/x6-sites/src/tutorial/plugins/transform/resizing/settings.tsx
index efdd86857fa..ee5caec5fed 100644
--- a/sites/x6-sites/src/tutorial/plugins/transform/resizing/settings.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/transform/resizing/settings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox, Slider, Card, Row, Col } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -113,7 +113,7 @@ export class Settings extends React.Component<Props, State> {
             />
           </Col>
           <Col span={2}>
-            <div className={styles['slider-value']}>{this.state.minWidth}</div>
+            <div className="slider-value">{this.state.minWidth}</div>
           </Col>
         </Row>
         <Row align="middle">
@@ -128,7 +128,7 @@ export class Settings extends React.Component<Props, State> {
             />
           </Col>
           <Col span={2}>
-            <div className={styles['slider-value']}>{this.state.maxWidth}</div>
+            <div className="slider-value">{this.state.maxWidth}</div>
           </Col>
         </Row>
         <Row align="middle">
@@ -143,7 +143,7 @@ export class Settings extends React.Component<Props, State> {
             />
           </Col>
           <Col span={2}>
-            <div className={styles['slider-value']}>{this.state.minHeight}</div>
+            <div className="slider-value">{this.state.minHeight}</div>
           </Col>
         </Row>
         <Row align="middle">
@@ -158,7 +158,7 @@ export class Settings extends React.Component<Props, State> {
             />
           </Col>
           <Col span={2}>
-            <div className={styles['slider-value']}>{this.state.maxHeight}</div>
+            <div className="slider-value">{this.state.maxHeight}</div>
           </Col>
         </Row>
         <Row align="middle">
diff --git a/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.less b/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.less
index b9c332eb23c..629bbd3681a 100644
--- a/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.less
+++ b/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.less
@@ -1,64 +1,61 @@
-.app {
+.rotating-app {
   display: flex;
   padding: 0;
-  padding: 16px 8px;
   font-family: sans-serif;
-}
 
-.app-side {
-  bottom: 0;
-  padding: 0 8px;
-}
+  .app-side {
+    bottom: 0;
+    padding: 0 8px;
+
+    .slider-value {
+      display: inline-block;
+      margin-left: 8px;
+      padding: 3px 7px;
+      color: #333;
+      font-size: 12px;
+      line-height: 1.25;
+      background: #eee;
+      border-radius: 10px;
+    }
+  }
 
-.app-content {
-  flex: 1;
-  margin-right: 8px;
-  margin-left: 8px;
-  box-shadow: 0 0 10px 1px #e9e9e9;
-}
+  .app-content {
+    flex: 1;
+    margin-right: 8px;
+    margin-left: 8px;
+    box-shadow: 0 0 10px 1px #e9e9e9;
+  }
+
+  .x6-widget-transform {
+    margin: -1px 0 0 -1px;
+    padding: 0;
+    border: 1px solid #239edd;
+    border-radius: 6px;
+  }
+
+  .x6-widget-transform > div {
+    border: 1px solid #239edd;
+  }
+
+  .x6-widget-transform > div:hover {
+    background-color: #3dafe4;
+  }
+
+  .x6-widget-transform-active-handle {
+    background-color: #3dafe4;
+  }
 
-:global {
   .ant-card {
     min-height: 250px;
     box-shadow: 0 0 10px 1px #e9e9e9;
   }
-  
+
   .ant-card-head-title {
     text-align: center;
   }
-  
+
   .ant-row {
     margin: 16px 0;
     text-align: left;
   }
 }
-
-.slider-value {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 3px 7px;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.25;
-  background: #eee;
-  border-radius: 10px;
-}
-
-.x6-widget-transform {
-  margin: -1px 0 0 -1px;
-  padding: 0;
-  border: 1px solid #239edd;
-  border-radius: 6px;
-}
-
-.x6-widget-transform > div {
-  border: 1px solid #239edd;
-}
-
-.x6-widget-transform > div:hover {
-  background-color: #3dafe4;
-}
-
-.x6-widget-transform-active-handle {
-  background-color: #3dafe4;
-}
diff --git a/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.tsx b/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.tsx
index c833dd0ba15..31f684b6613 100644
--- a/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/transform/rotating/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Graph } from '@antv/x6'
 import { Transform } from '@antv/x6-plugin-transform'
 import { Settings, State } from './settings'
-import styles from './index.less'
+import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
@@ -91,11 +91,11 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div className={styles.app}>
-        <div className={styles['app-side']}>
+      <div className="rotating-app">
+        <div className="app-side">
           <Settings onChange={this.onSettingChanged} />
         </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/plugins/transform/rotating/settings.tsx b/sites/x6-sites/src/tutorial/plugins/transform/rotating/settings.tsx
index 9eb65408917..a4ace5bb617 100644
--- a/sites/x6-sites/src/tutorial/plugins/transform/rotating/settings.tsx
+++ b/sites/x6-sites/src/tutorial/plugins/transform/rotating/settings.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Checkbox, Slider, Card, Row, Col } from 'antd'
-import styles from './index.less'
+import './index.less'
 
 export interface Props {
   onChange: (res: State) => void
@@ -65,7 +65,7 @@ export class Settings extends React.Component<Props, State> {
             />
           </Col>
           <Col span={2}>
-            <div className={styles['slider-value']}>{this.state.grid}</div>
+            <div className="slider-value">{this.state.grid}</div>
           </Col>
         </Row>
       </Card>