docs: fix Tag demo (#24245)

close #24231

components/tag/__tests__/__snapshots__/demo.test.js.snap

@@ -232,12 +232,17 @@ Array [
 `;
 
 exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
-<div>
+Array [
-  <h4
+  <div
-    style="margin-bottom:16px"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
   >
-    Presets:
+    <span
-  </h4>
+      class="ant-divider-inner-text"
+    >
+      Presets
+    </span>
+  </div>,
   <div>
     <span
       class="ant-tag ant-tag-magenta"
@@ -294,12 +299,17 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
     >
       purple
     </span>
-  </div>
+  </div>,
-  <h4
+  <div
-    style="margin:16px 0"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
   >
-    Custom:
+    <span
-  </h4>
+      class="ant-divider-inner-text"
+    >
+      Custom
+    </span>
+  </div>,
   <div>
     <span
       class="ant-tag ant-tag-has-color"
@@ -325,8 +335,8 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
     >
       #108ee9
     </span>
-  </div>
+  </div>,
-</div>
+]
 `;
 
 exports[`renders ./components/tag/demo/control.md correctly 1`] = `

components/tag/demo/colorful.md

@@ -14,11 +14,11 @@ title:
 We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
 
 ```jsx
-import { Tag } from 'antd';
+import { Tag, Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
-    <h4 style={{ marginBottom: 16 }}>Presets:</h4>
+    <Divider orientation="left">Presets</Divider>
     <div>
       <Tag color="magenta">magenta</Tag>
       <Tag color="red">red</Tag>
@@ -32,14 +32,14 @@ ReactDOM.render(
       <Tag color="geekblue">geekblue</Tag>
       <Tag color="purple">purple</Tag>
     </div>
-    <h4 style={{ margin: '16px 0' }}>Custom:</h4>
+    <Divider orientation="left">Custom</Divider>
     <div>
       <Tag color="#f50">#f50</Tag>
       <Tag color="#2db7f5">#2db7f5</Tag>
       <Tag color="#87d068">#87d068</Tag>
       <Tag color="#108ee9">#108ee9</Tag>
     </div>
-  </div>,
+  </>,
   mountNode,
 );
 ```

site/theme/template/Content/Demo/index.jsx

@@ -181,10 +181,7 @@ class Demo extends React.Component {
       html,
       js: sourceCode
         .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
-        .replace(
+        .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
-          /import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/,
-          'const { $1 } = icons;',
-        )
         .replace("import moment from 'moment';", '')
         .replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
         .replace(
@@ -252,7 +249,11 @@ import 'antd/dist/antd.css';
 import './index.css';
 ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
 `.trim();
-    const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
+    const indexCssContent = (style || '')
+      .trim()
+      .replace(new RegExp(`#${meta.id}\\s*`, 'g'), '')
+      .replace('</style>', '')
+      .replace('<style>', '');
 
     const codesandboxPackage = {
       name: `${localizedTitle} - Ant Design Demo`,
@@ -299,9 +300,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
       <section className={codeBoxClass} id={meta.id}>
         <section className="code-box-demo">
           <ErrorBoundary>{this.liveDemo}</ErrorBoundary>
-          {style ? (
+          {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
-            <style dangerouslySetInnerHTML={{ __html: style }} />
-          ) : null}
         </section>
         <section className="code-box-meta markdown">
           <div className="code-box-title">