From 7f8fe66324a391fea719bd5d9d726ce2b61a5921 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Mon, 11 Jul 2022 15:31:07 +0800
Subject: [PATCH 1/2] fix(tag): update style

---
 src/tag/CheckTag.tsx              | 12 +++++---
 src/tag/Tag.tsx                   | 20 ++++++-------
 src/tag/_example/checkable.jsx    | 47 ++++++++++++++++++++-----------
 src/tag/_example/closable.jsx     | 20 +++++++------
 src/tag/_example/ellipsis.jsx     | 18 +++---------
 src/tag/_example/icon.jsx         | 13 +++++++++
 src/tag/_example/index.jsx        | 34 ++++++++++++++--------
 src/tag/_example/shape.jsx        | 10 +++----
 src/tag/_example/size.jsx         | 25 ++++++++--------
 src/tag/_example/style/index.less | 44 +++++++++++++++++------------
 src/tag/_example/theme.jsx        | 14 ++++-----
 src/tag/_example/variant.jsx      | 17 ++++++-----
 12 files changed, 159 insertions(+), 115 deletions(-)
 create mode 100644 src/tag/_example/icon.jsx

diff --git a/src/tag/CheckTag.tsx b/src/tag/CheckTag.tsx
index b79c7bd2..2127a57e 100644
--- a/src/tag/CheckTag.tsx
+++ b/src/tag/CheckTag.tsx
@@ -39,7 +39,7 @@ const TagCheck: React.FC<TagCheckProps> = React.memo(
     const checkTagClass = classNames(
       `${baseClass}`,
       `${baseClass}--checkable`,
-      `${baseClass}--${shape}`,
+      `${baseClass}--shape-${shape}`,
       `${baseClass}--size-${size}`,
       {
         [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
@@ -70,11 +70,15 @@ const TagCheck: React.FC<TagCheckProps> = React.memo(
     };
 
     return (
-      <button className={checkTagClass} style={tagStyle} onClick={handleClick} ref={ref} disabled={disabled} {...other}>
+      <span className={checkTagClass} style={tagStyle} onClick={handleClick} ref={ref} {...other}>
         <span className={`${baseClass}__icon`}>{icon}</span>
         <span className={`${baseClass}__text`}>{content || children}</span>
-        {closable ? <Icon name="close" className={`${baseClass}__close`} onClick={handleClose} /> : null}
-      </button>
+        {closable ? (
+          <span className={`${baseClass}__icon-close`} onClick={handleClose}>
+            <Icon name="close" />
+          </span>
+        ) : null}
+      </span>
     );
   }),
 );
diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index 1d11375c..fef07567 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -18,7 +18,7 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
     content = null,
     disabled = false,
     icon = undefined,
-    maxWidth = '',
+    maxWidth,
     children = '',
     shape = 'square',
     size = 'medium',
@@ -30,19 +30,15 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
   } = props;
 
   const { classPrefix } = useConfig();
-
   const baseClass = `${classPrefix}-tag`;
 
   const tagClassNames = classNames(
     `${baseClass}`,
-    `${baseClass}-${theme}`,
-    `${baseClass}--${shape}`,
-    `${baseClass}-${variant}`,
+    `${baseClass}--theme-${theme}`,
+    `${baseClass}--shape-${shape}`,
+    `${baseClass}--variant-${variant}`,
     `${baseClass}--size-${size}`,
     {
-      [`${classPrefix}-is-error`]: theme === 'danger',
-      [`${classPrefix}-is-success`]: theme === 'success',
-      [`${classPrefix}-is-warning`]: theme === 'warning',
       [`${classPrefix}-is-closable ${baseClass}--closable`]: closable,
       [`${classPrefix}-is-disabled ${baseClass}--disabled`]: disabled,
     },
@@ -51,7 +47,7 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
 
   const tagStyle = {
     ...style,
-    maxWidth,
+    maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
   };
 
   const getRenderContent = useCallback(() => {
@@ -85,7 +81,11 @@ const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
     <span className={tagClassNames} style={tagStyle} onClick={handleClick} ref={ref} {...other}>
       <span className={`${baseClass}__icon`}>{icon}</span>
       <span className={`${baseClass}__text`}>{getRenderContent() || children}</span>
-      {closable ? <Icon name="close" className={`${baseClass}__close`} onClick={onClickClose} /> : null}
+      {closable ? (
+        <span className={`${baseClass}__icon-close`} onClick={onClickClose}>
+          <Icon name="close" />
+        </span>
+      ) : null}
     </span>
   );
 });
diff --git a/src/tag/_example/checkable.jsx b/src/tag/_example/checkable.jsx
index 29f6f641..381392af 100644
--- a/src/tag/_example/checkable.jsx
+++ b/src/tag/_example/checkable.jsx
@@ -1,27 +1,40 @@
 import React, { useState } from 'react';
 import { TagCheck } from 'tdesign-mobile-react';
 
-const ClickableUse = () => {
-  const [checked, setChecked] = useState(false);
+const TagChecksOptions = [
+  {
+    name: '选中',
+    checked: true,
+  },
+  {
+    name: '未选中',
+    checked: false,
+  },
+  {
+    name: '不可选',
+    checked: false,
+    disabled: true,
+  },
+];
 
-  const handleOnChange = (v) => {
-    console.log('on checked', v);
-  };
-  const handleChange = (v) => {
-    console.log('to checked', v);
-    setChecked(v);
+const CheckeableDemo = () => {
+  const [tagChecks, setTagChecks] = useState(TagChecksOptions);
+
+  const onClick = (tagCheckIndex) => {
+    const shallowClone = [...tagChecks];
+    shallowClone[tagCheckIndex].checked = !shallowClone[tagCheckIndex].checked;
+    setTagChecks([...shallowClone]);
   };
+
   return (
-    <div className="t-tag__demo-block t-tag__demo-common">
-      <TagCheck defaultChecked onChange={handleOnChange}>
-        已点击
-      </TagCheck>
-      <TagCheck onChange={handleChange} checked={checked}>
-        未点击
-      </TagCheck>
-      <TagCheck disabled> 不可点击</TagCheck>
+    <div className="tag-demo">
+      {tagChecks.map((item, index) => (
+        <TagCheck key={index} checked={item.checked} disabled={item.disabled} onClick={() => onClick(index)}>
+          {item.name}
+        </TagCheck>
+      ))}
     </div>
   );
 };
 
-export default ClickableUse;
+export default CheckeableDemo;
diff --git a/src/tag/_example/closable.jsx b/src/tag/_example/closable.jsx
index f1d1cbde..516f2d5e 100644
--- a/src/tag/_example/closable.jsx
+++ b/src/tag/_example/closable.jsx
@@ -1,11 +1,17 @@
 import React, { useState } from 'react';
 import { Tag } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
 
 const TagOptions = [
   {
     size: 'medium',
     name: '标签',
   },
+  {
+    name: '标签',
+    size: 'medium',
+    icon: <Icon name="app" />,
+  },
 ];
 const ClosableDemo = () => {
   const [tags, setTags] = useState(TagOptions);
@@ -19,14 +25,12 @@ const ClosableDemo = () => {
   };
 
   return (
-    <div className="t-tag__demo-block">
-      {tags.map((opt, dex) => {
-        return (
-          <Tag key={dex} theme="primary" closable size={opt.size} onClose={() => onClose(dex)}>
-            标签
-          </Tag>
-        );
-      })}
+    <div className="tag-demo">
+      {tags.map((item, index) => (
+        <Tag key={index} theme="primary" closable size={item.size} icon={item.icon} onClose={() => onClose(index)}>
+          标签
+        </Tag>
+      ))}
     </div>
   );
 };
diff --git a/src/tag/_example/ellipsis.jsx b/src/tag/_example/ellipsis.jsx
index 7af87e32..7c4e152b 100644
--- a/src/tag/_example/ellipsis.jsx
+++ b/src/tag/_example/ellipsis.jsx
@@ -1,20 +1,10 @@
 import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
-const Ellipsis = () => (
-  <div className="t-tag__demo-common">
-    <div className="t-tag__demo-block">
-      <Tag theme="primary" maxWidth="80px">
-        标签标签标签标签标签标签标签标签标签标签标签
-      </Tag>
-      <Tag theme="primary" size="middle" maxWidth="80px">
-        标签标签标签标签标签标签标签标签标签标签
-      </Tag>
-      <Tag theme="primary" size="small" maxWidth="80px">
-        标签标签标签标签标签标签标签标签标签
-      </Tag>
-    </div>
+const EllipsisDemo = () => (
+  <div className="tag-demo">
+    <Tag maxWidth={130}>听说超长可以省略听说超长</Tag>
   </div>
 );
 
-export default Ellipsis;
+export default EllipsisDemo;
diff --git a/src/tag/_example/icon.jsx b/src/tag/_example/icon.jsx
new file mode 100644
index 00000000..2880755f
--- /dev/null
+++ b/src/tag/_example/icon.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Tag } from 'tdesign-mobile-react';
+import { Icon } from 'tdesign-icons-react';
+
+const IconDemo = () => (
+  <div className="tag-demo">
+    <Tag theme="primary" shape="round" icon={<Icon name="app" />}>
+      标签
+    </Tag>
+  </div>
+);
+
+export default IconDemo;
diff --git a/src/tag/_example/index.jsx b/src/tag/_example/index.jsx
index 82eff2fa..73ec8e77 100644
--- a/src/tag/_example/index.jsx
+++ b/src/tag/_example/index.jsx
@@ -1,32 +1,42 @@
 import React from 'react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import ClickableUse from './checkable';
-import Shape from './shape';
+import CheckeableDemo from './checkable';
+import ShapeDemo from './shape';
 import ClosableDemo from './closable';
-import Theme from './theme';
-import Variant from './variant';
-import Size from './size';
+import ThemeDemo from './theme';
+import VariantDemo from './variant';
+import SizeDemo from './size';
+import EllipsisDemo from './ellipsis';
 
 import './style/index.less';
+import IconDemo from './icon';
 
 export default function Base() {
   return (
     <>
-      <TDemoHeader title="Tag标签" summary="用于标记表示主体属性、类型、状态等，由底部图形和标签文字组成" />
-      <TDemoBlock title="01类型" summary="展示型标签">
-        <Theme />
-        <Variant />
-        <Shape />
+      <TDemoHeader title="Tag 标签" summary="用于标记表示主体属性、类型、状态等，由底部图形和标签文字组成" />
+      <TDemoBlock title="01类型" summary="基础标签">
+        <ThemeDemo />
+        <VariantDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="带图标标签">
+        <IconDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="圆角标签">
+        <ShapeDemo />
       </TDemoBlock>
       <TDemoBlock summary="可关闭标签">
         <ClosableDemo />
       </TDemoBlock>
+      <TDemoBlock summary="超长省略标签">
+        <EllipsisDemo />
+      </TDemoBlock>
       <TDemoBlock title="02 状态" summary="标签状态">
-        <ClickableUse />
+        <CheckeableDemo />
       </TDemoBlock>
       <TDemoBlock title="03 规格" summary="标签规格">
-        <Size />
+        <SizeDemo />
       </TDemoBlock>
     </>
   );
diff --git a/src/tag/_example/shape.jsx b/src/tag/_example/shape.jsx
index 303d8804..e4e5e436 100644
--- a/src/tag/_example/shape.jsx
+++ b/src/tag/_example/shape.jsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
-const Shape = () => (
-  <div className="t-tag__demo-block t-tag__demo-common">
+const ShapeDemo = () => (
+  <div className="tag-demo">
     <Tag theme="primary" shape="round">
-      圆角标签
+      圆弧
     </Tag>
     <Tag theme="primary" shape="mark">
-      半圆角标签
+      半圆弧
     </Tag>
   </div>
 );
 
-export default Shape;
+export default ShapeDemo;
diff --git a/src/tag/_example/size.jsx b/src/tag/_example/size.jsx
index dcbcf3b6..c16c5f53 100644
--- a/src/tag/_example/size.jsx
+++ b/src/tag/_example/size.jsx
@@ -1,25 +1,24 @@
 import React from 'react';
-import { Tag } from 'tdesign-mobile-react';
-import { TagCheck } from 'tdesign-mobile-react';
+import { Tag, TagCheck } from 'tdesign-mobile-react';
 
-const Size =() => (
-  <div className="t-tag__demo-block">
-    <div className="t-tag__demo-size">
+const SizeDemo = () => (
+  <div>
+    <div className="group padding-bottom d-flex">
       <Tag theme="primary" size="large">
-        展示标签大号
+        展示标签30
       </Tag>
-      <Tag theme="primary" size="middle">
-        展示标签中号
+      <Tag theme="primary" size="medium">
+        展示标签24
       </Tag>
       <Tag theme="primary" size="small">
-        展示标签小号
+        展示标签20
       </Tag>
     </div>
-    <div className="t-tag__demo-size ">
-      <TagCheck size="large">点击标签大号</TagCheck>
-      <TagCheck size="middle">点击标签中号</TagCheck>
+    <div className="group d-flex">
+      <TagCheck size="large">点击标签30</TagCheck>
+      <TagCheck size="medium">点击标签24</TagCheck>
     </div>
   </div>
 );
 
-export default Size;
+export default SizeDemo;
diff --git a/src/tag/_example/style/index.less b/src/tag/_example/style/index.less
index 35afd69f..3aa8c663 100644
--- a/src/tag/_example/style/index.less
+++ b/src/tag/_example/style/index.less
@@ -1,25 +1,33 @@
-.t-tag__demo {
-  &-block {
-    background-color: rgba(255, 255, 255, 1);
-    padding: 16px;
-    display: flex;
-    &:not(:last-child) {
-      margin-bottom: 16px;
-    }
-  }
-  &-theme > span {
-    margin-right: 8px;
+.tag-demo {
+  background-color: #fff;
+  padding: 16px;
+  display: flex;
+
+  .t-tag + .t-tag {
+    margin-left: 16px;
   }
+}
+
+.tag-demo + .tag-demo {
+  margin-top: 16px;
+}
 
-  &-size > span,
-  &-size > button {
-    flex-direction: row;
+.group {
+  padding: 16px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
 
-    margin-right: 48px;
-    margin-bottom: 18px;
+  &.d-flex {
+    display: flex;
+    align-items: flex-start;
   }
-  &-common > button,
-  &-common > span {
+
+  &.padding-bottom {
+    padding: 16px 16px 0;
+  }
+
+  .t-tag {
     margin-right: 16px;
   }
 }
diff --git a/src/tag/_example/theme.jsx b/src/tag/_example/theme.jsx
index bfd3f6bf..0acda07e 100644
--- a/src/tag/_example/theme.jsx
+++ b/src/tag/_example/theme.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
-const Theme = () => (
-  <div className="t-tag__demo-block t-tag__demo-theme">
+const ThemeDemo = () => (
+  <div className="tag-demo">
     <Tag theme="primary">标签</Tag>
-    <Tag theme="success">成功</Tag>
-    <Tag theme="warning">警告</Tag>
-    <Tag theme="danger">危险</Tag>
-    <Tag theme="default">信息</Tag>
+    <Tag theme="danger">标签</Tag>
+    <Tag theme="warning">标签</Tag>
+    <Tag theme="success">标签</Tag>
+    <Tag>标签</Tag>
   </div>
 );
 
-export default Theme;
+export default ThemeDemo;
diff --git a/src/tag/_example/variant.jsx b/src/tag/_example/variant.jsx
index ddf763a0..b2706fa1 100644
--- a/src/tag/_example/variant.jsx
+++ b/src/tag/_example/variant.jsx
@@ -1,18 +1,21 @@
 import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
-const Variant = () => (
-  <div className="t-tag__demo-block t-tag__demo-common">
-    <Tag theme="primary" variant="outline">
-      镂空标签
+const VariantDemo = () => (
+  <div className="tag-demo">
+    <Tag theme="primary" variant="dark">
+      深色
     </Tag>
     <Tag theme="primary" variant="light">
-      浅底标签
+      浅色
+    </Tag>
+    <Tag theme="primary" variant="outline">
+      描边
     </Tag>
     <Tag theme="primary" variant="light-outline">
-      标签
+      浅色描边
     </Tag>
   </div>
 );
 
-export default Variant;
+export default VariantDemo;

From 22929486705e34080fda32d5f09c3d1ffcb64e8e Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Tue, 12 Jul 2022 13:48:07 +0800
Subject: [PATCH 2/2] style(tag): adjust demo

---
 src/tag/_example/checkable.jsx |  4 ++--
 src/tag/_example/closable.jsx  |  4 ++--
 src/tag/_example/ellipsis.jsx  |  4 ++--
 src/tag/_example/icon.jsx      |  4 ++--
 src/tag/_example/index.jsx     | 38 +++++++++++++++++++++++++++-------
 src/tag/_example/shape.jsx     |  4 ++--
 src/tag/_example/size.jsx      | 30 +++++++++++----------------
 src/tag/_example/theme.jsx     |  4 ++--
 src/tag/_example/variant.jsx   |  4 ++--
 9 files changed, 56 insertions(+), 40 deletions(-)

diff --git a/src/tag/_example/checkable.jsx b/src/tag/_example/checkable.jsx
index 381392af..cc2ffe89 100644
--- a/src/tag/_example/checkable.jsx
+++ b/src/tag/_example/checkable.jsx
@@ -27,13 +27,13 @@ const CheckeableDemo = () => {
   };
 
   return (
-    <div className="tag-demo">
+    <>
       {tagChecks.map((item, index) => (
         <TagCheck key={index} checked={item.checked} disabled={item.disabled} onClick={() => onClick(index)}>
           {item.name}
         </TagCheck>
       ))}
-    </div>
+    </>
   );
 };
 
diff --git a/src/tag/_example/closable.jsx b/src/tag/_example/closable.jsx
index 516f2d5e..ea6fd054 100644
--- a/src/tag/_example/closable.jsx
+++ b/src/tag/_example/closable.jsx
@@ -25,13 +25,13 @@ const ClosableDemo = () => {
   };
 
   return (
-    <div className="tag-demo">
+    <>
       {tags.map((item, index) => (
         <Tag key={index} theme="primary" closable size={item.size} icon={item.icon} onClose={() => onClose(index)}>
           标签
         </Tag>
       ))}
-    </div>
+    </>
   );
 };
 
diff --git a/src/tag/_example/ellipsis.jsx b/src/tag/_example/ellipsis.jsx
index 7c4e152b..c8df1f85 100644
--- a/src/tag/_example/ellipsis.jsx
+++ b/src/tag/_example/ellipsis.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
 const EllipsisDemo = () => (
-  <div className="tag-demo">
+  <>
     <Tag maxWidth={130}>听说超长可以省略听说超长</Tag>
-  </div>
+  </>
 );
 
 export default EllipsisDemo;
diff --git a/src/tag/_example/icon.jsx b/src/tag/_example/icon.jsx
index 2880755f..fcc65940 100644
--- a/src/tag/_example/icon.jsx
+++ b/src/tag/_example/icon.jsx
@@ -3,11 +3,11 @@ import { Tag } from 'tdesign-mobile-react';
 import { Icon } from 'tdesign-icons-react';
 
 const IconDemo = () => (
-  <div className="tag-demo">
+  <>
     <Tag theme="primary" shape="round" icon={<Icon name="app" />}>
       标签
     </Tag>
-  </div>
+  </>
 );
 
 export default IconDemo;
diff --git a/src/tag/_example/index.jsx b/src/tag/_example/index.jsx
index 73ec8e77..ed06428f 100644
--- a/src/tag/_example/index.jsx
+++ b/src/tag/_example/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { TagCheck } from 'tdesign-mobile-react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import CheckeableDemo from './checkable';
@@ -17,26 +18,47 @@ export default function Base() {
     <>
       <TDemoHeader title="Tag 标签" summary="用于标记表示主体属性、类型、状态等，由底部图形和标签文字组成" />
       <TDemoBlock title="01类型" summary="基础标签">
-        <ThemeDemo />
-        <VariantDemo />
+        <div className="tag-demo">
+          <ThemeDemo />
+        </div>
+        <div className="tag-demo">
+          <VariantDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock summary="带图标标签">
-        <IconDemo />
+        <div className="tag-demo">
+          <IconDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock summary="圆角标签">
-        <ShapeDemo />
+        <div className="tag-demo">
+          <ShapeDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock summary="可关闭标签">
-        <ClosableDemo />
+        <div className="tag-demo">
+          <ClosableDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock summary="超长省略标签">
-        <EllipsisDemo />
+        <div className="tag-demo">
+          <EllipsisDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock title="02 状态" summary="标签状态">
-        <CheckeableDemo />
+        <div className="tag-demo">
+          <CheckeableDemo />
+        </div>
       </TDemoBlock>
       <TDemoBlock title="03 规格" summary="标签规格">
-        <SizeDemo />
+        <div className="group padding-bottom d-flex">
+          <SizeDemo />
+        </div>
+
+        <div className="group d-flex">
+          <TagCheck size="large">点击标签30</TagCheck>
+          <TagCheck size="medium">点击标签24</TagCheck>
+        </div>
       </TDemoBlock>
     </>
   );
diff --git a/src/tag/_example/shape.jsx b/src/tag/_example/shape.jsx
index e4e5e436..cfbe243d 100644
--- a/src/tag/_example/shape.jsx
+++ b/src/tag/_example/shape.jsx
@@ -2,14 +2,14 @@ import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
 const ShapeDemo = () => (
-  <div className="tag-demo">
+  <>
     <Tag theme="primary" shape="round">
       圆弧
     </Tag>
     <Tag theme="primary" shape="mark">
       半圆弧
     </Tag>
-  </div>
+  </>
 );
 
 export default ShapeDemo;
diff --git a/src/tag/_example/size.jsx b/src/tag/_example/size.jsx
index c16c5f53..164cc8fb 100644
--- a/src/tag/_example/size.jsx
+++ b/src/tag/_example/size.jsx
@@ -1,24 +1,18 @@
 import React from 'react';
-import { Tag, TagCheck } from 'tdesign-mobile-react';
+import { Tag } from 'tdesign-mobile-react';
 
 const SizeDemo = () => (
-  <div>
-    <div className="group padding-bottom d-flex">
-      <Tag theme="primary" size="large">
-        展示标签30
-      </Tag>
-      <Tag theme="primary" size="medium">
-        展示标签24
-      </Tag>
-      <Tag theme="primary" size="small">
-        展示标签20
-      </Tag>
-    </div>
-    <div className="group d-flex">
-      <TagCheck size="large">点击标签30</TagCheck>
-      <TagCheck size="medium">点击标签24</TagCheck>
-    </div>
-  </div>
+  <>
+    <Tag theme="primary" size="large">
+      展示标签30
+    </Tag>
+    <Tag theme="primary" size="medium">
+      展示标签24
+    </Tag>
+    <Tag theme="primary" size="small">
+      展示标签20
+    </Tag>
+  </>
 );
 
 export default SizeDemo;
diff --git a/src/tag/_example/theme.jsx b/src/tag/_example/theme.jsx
index 0acda07e..441db18a 100644
--- a/src/tag/_example/theme.jsx
+++ b/src/tag/_example/theme.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
 const ThemeDemo = () => (
-  <div className="tag-demo">
+  <>
     <Tag theme="primary">标签</Tag>
     <Tag theme="danger">标签</Tag>
     <Tag theme="warning">标签</Tag>
     <Tag theme="success">标签</Tag>
     <Tag>标签</Tag>
-  </div>
+  </>
 );
 
 export default ThemeDemo;
diff --git a/src/tag/_example/variant.jsx b/src/tag/_example/variant.jsx
index b2706fa1..1731138a 100644
--- a/src/tag/_example/variant.jsx
+++ b/src/tag/_example/variant.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Tag } from 'tdesign-mobile-react';
 
 const VariantDemo = () => (
-  <div className="tag-demo">
+  <>
     <Tag theme="primary" variant="dark">
       深色
     </Tag>
@@ -15,7 +15,7 @@ const VariantDemo = () => (
     <Tag theme="primary" variant="light-outline">
       浅色描边
     </Tag>
-  </div>
+  </>
 );
 
 export default VariantDemo;