chore: merge master

2024-11-27 20:49:53 +08:00 · 2022-09-19 17:09:36 +08:00 · 2022-09-19 17:09:36 +08:00 · cdc20027b5
commit cdc20027b5
parent 032a71368f c1ee787c68
216 changed files with 21265 additions and 14518 deletions
--- a/.github/workflows/ui-upload.yml
+++ b/.github/workflows/ui-upload.yml
@ -52,12 +52,11 @@ jobs:
          path: imageSnapshots

      - name: Install
-        run: npm i fast-glob lodash argos-cli
+        run: npm i fast-glob lodash @argos-ci/core

-      - name: Upload argos-ci
+      - name: Upload on Argos
        id: deploy
        run: npm run argos
        env:
          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_GITHUB_BRANCH: ${{ steps.branch.outputs.id }}
-          ARGOS_GITHUB_COMMIT: ${{ steps.commit.outputs.id }}
+          ARGOS_PARALLEL_NONCE: ${{ github.run_id }}
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@ -16,6 +16,8 @@ jobs:
    steps:
      - name: checkout
        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2

      - name: cache package-lock.json
        uses: actions/cache@v3
--- a/.github/workflows/verify-files-modify.yml
+++ b/.github/workflows/verify-files-modify.yml
@ -19,6 +19,7 @@ jobs:
          forbid-paths: '.github/, scripts/'
          forbid-files: 'CHANGELOG.zh-CN.md, CHANGELOG.en-US.md, LICENSE'
          skip-verify-authority: 'write'
+          skip-label: 'skip-verify-files'
          assignees: 'afc163, zombieJ, xrkffgg, MadCcc'
          comment-mark: 'version'
          comment: |
--- a/.jest.js
+++ b/.jest.js
@ -44,6 +44,7 @@ module.exports = {
    '!components/*/__tests__/type.test.tsx',
    '!components/**/*/interface.{ts,tsx}',
    '!components/*/__tests__/image.test.{ts,tsx}',
+    '!components/__tests__/node.test.tsx',
  ],
  transformIgnorePatterns,
  snapshotSerializers: ['enzyme-to-json/serializer'],
--- a/.jest.node.js
+++ b/.jest.node.js
@ -12,8 +12,7 @@ module.exports = {
    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
  },
-  testRegex: 'demo\\.test\\.(j|t)s$',
+  testRegex: 'node\\.test\\.(j|t)sx$',
  testEnvironment: 'node',
  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
 };
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,27 @@ timeline: true

 ---

+## 4.23.2
+
+`2022-09-17`
+
+- 🐞 Fix Card console warning when using `tabList` prop. [#37537](https://github.com/ant-design/ant-design/pull/37537) [@edc-hui](https://github.com/edc-hui)
+- 🐞 Fix Table `filterSearch` is not executed when `filterMode="tree"`. [#37587](https://github.com/ant-design/ant-design/pull/37587) [@edc-hui](https://github.com/edc-hui)
+- 🐞 Fix Tooltip should not replace children `className` when it's not a string type. [#37598](https://github.com/ant-design/ant-design/pull/37598)
+- 🐞 Fix Tree that TreeNodes not aligned when draggable and some node is disabled. [#37534](https://github.com/ant-design/ant-design/pull/37534)
+- TypeScript
+  - 🤖 Replace deprecated `React.ReactChild` type. [#37551](https://github.com/ant-design/ant-design/pull/37551) [@bowen-wu](https://github.com/bowen-wu)
+
+## 4.23.1
+
+`2022-09-09`
+
+- 🐞 Fix unable to close modal when using visible in `Modal.confirm().update`. [#37471](https://github.com/ant-design/ant-design/pull/37471) [@Aaron674092290](https://github.com/Aaron674092290)
+- 🐞 Fix esbuild strict mode call `No matching export theme` error. [#37462](https://github.com/ant-design/ant-design/pull/37462)
+- 🐞 Fix Switch background flush issue by reverting [#35103](https://github.com/ant-design/ant-design/pull/35103). [#37458](https://github.com/ant-design/ant-design/pull/37458)
+- TypeScript
+  - 🤖 InputNumber `value` add null type. [#37421](https://github.com/ant-design/ant-design/pull/37421) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 4.23.0

 `2022-09-04`
@ -30,7 +51,7 @@ timeline: true
  - 🛠 Table changes `filterDropdownVisible` to `filterDropdownOpen`. [#37026](https://github.com/ant-design/ant-design/pull/37026) [@yykoypj](https://github.com/yykoypj)
  - 🛠 Slider add `tooltip` prop for all props related with Tooltip. [#37000](https://github.com/ant-design/ant-design/pull/37000) [@yykoypj](https://github.com/yykoypj)
  - 🛠 Tooltip Popover and Popconfirm change `visible` to `open`. [#37241](https://github.com/ant-design/ant-design/pull/37241) [@yykoypj](https://github.com/yykoypj)
-  - 🛠 Remove `visible` prop of Tag. [#36934](https://github.com/ant-design/ant-design/pull/36934) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 Deprecate `visible` prop of Tag. [#36934](https://github.com/ant-design/ant-design/pull/36934) [@yykoypj](https://github.com/yykoypj)
 - 🛠 Deprecate `dropdownClassName` prop of all components and change to `popupClassName`. [#36880](https://github.com/ant-design/ant-design/pull/36880) [@heiyu4585](https://github.com/heiyu4585)
 - 🛠 Tabs support `items` props and origin jsx usage will be depreacted. [#36889](https://github.com/ant-design/ant-design/pull/36889)
 - 🐞 Fix that some css variables are not consistent with less variables.
@ -44,8 +65,6 @@ timeline: true
 - 🌐 Add missing translations for filterCheckall in ru_RU. [#37311](https://github.com/ant-design/ant-design/pull/37311) [@HelLuv](https://github.com/HelLuv)
 - 🌐 Add missing translations in `cs_CZ`. [#37388](https://github.com/ant-design/ant-design/pull/37388) [@ZdenekKrcal](https://github.com/ZdenekKrcal)

---
-
 ## 4.22.8

 `2022-08-26`
@ -194,7 +213,7 @@ timeline: true
  - 💄 Fix nested Table margin style. [#36209](https://github.com/ant-design/ant-design/pull/36209)
  - 🐞 Fix Table filter dropdown with multiple subMenu may not closed. [#36132](https://github.com/ant-design/ant-design/pull/36132)
  - 🐞 Table reset the last selection key when deselect or bulk operations. [#34705](https://github.com/ant-design/ant-design/pull/34705) [@Dunqing](https://github.com/Dunqing)
- 🐞 Fix Popover arrow color with custom `color` prop. [#36241](https://github.com/ant-design/ant-design/pull/36241) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Popover arrow color with custom `color` prop. [#36241](https://github.com/ant-design/ant-design/pull/36241)
 - 🐞 Fix Upload `listType="picture-card"` select button not being hidden when children is empty. [#36196](https://github.com/ant-design/ant-design/pull/36196)
 - 🐞 Fix Menu deprecated warning when `item={undefined}`. [#36190](https://github.com/ant-design/ant-design/pull/36190)
 - 💄 Fix Button `loading` icon margin style lost. [#36168](https://github.com/ant-design/ant-design/pull/36168)
@ -417,7 +436,7 @@ timeline: true
 - Less
  - 💄 Replace less html selector with related variable. [#35186](https://github.com/ant-design/ant-design/pull/35186) [@jeffdrumgod](https://github.com/jeffdrumgod)
  - 💄 Modify less `danger` value from the function to variable. [#35113](https://github.com/ant-design/ant-design/pull/35113) [@TrickyPi](https://github.com/TrickyPi)
-  - 🐞 Arrow border radius variable use fixed value. [#35086](https://github.com/ant-design/ant-design/pull/35086) [@MadCcc](https://github.com/MadCcc)
+  - 🐞 Arrow border radius variable use fixed value. [#35086](https://github.com/ant-design/ant-design/pull/35086)
 - TypeScript
  - 🤖 Fixed `Upload` component `UploadChangeParam<T>` internal `fileList` not using generics. [#35158](https://github.com/ant-design/ant-design/pull/35158) [@rendaoer](https://github.com/rendaoer)
  - 🤖 Update TypeScript definition for `@types/react@18` compatible. [#35075](https://github.com/ant-design/ant-design/pull/35075) [@AliRezaBeigy](https://github.com/AliRezaBeigy) [#35076](https://github.com/ant-design/ant-design/pull/35076) [@littledian](https://github.com/littledian)
@ -572,7 +591,7 @@ timeline: true
 - 💄 Improve Menu `:focus-visible` style. [#34008](https://github.com/ant-design/ant-design/pull/34008)
 - 💄 Fix Pagination and Rate style problem in Safari. [#34002](https://github.com/ant-design/ant-design/pull/34002)
 - 💄 Fix Row and Col component styles when using prefixCls. [#33969](https://github.com/ant-design/ant-design/pull/33969) [@mic-web](https://github.com/mic-web)
- 🐞 Fix Timeline icons with custom color not working. [#33951](https://github.com/ant-design/ant-design/pull/33951) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Timeline icons with custom color not working. [#33951](https://github.com/ant-design/ant-design/pull/33951)
 - TypeScript
  - 🤖 Optimize Cascader `onChange` definition with `multiple` prop. [#33947](https://github.com/ant-design/ant-design/pull/33947) [@babycannotsay](https://github.com/babycannotsay)

@ -655,7 +674,7 @@ timeline: true

 `2021-12-29`

- 🐞 Fix Popconfirm throws `Can't perform a React state update on an unmounted component.` warning in some async case. [#33432](https://github.com/ant-design/ant-design/pull/33432) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix Popconfirm throws `Can't perform a React state update on an unmounted component.` warning in some async case. [#33432](https://github.com/ant-design/ant-design/pull/33432)
 - 🐞 Fix Input with `suffix` will crash when `value` is number type. [#33462](https://github.com/ant-design/ant-design/pull/33462)
 - 🐞 Fix Divider with text dashed border color error. [#33452](https://github.com/ant-design/ant-design/pull/33452) [@chen-jingjie](https://github.com/chen-jingjie)
 - 🐞 Fix Dropdown.Button not support `destroyPopupOnHide`. [#33442](https://github.com/ant-design/ant-design/pull/33442) [@LongHaoo](https://github.com/LongHaoo)
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,27 @@ timeline: true

 ---

+## 4.23.2
+
+`2022-09-17`
+
+- 🐞 修复 Card 传入 `tabList` 属性时控制台出现废弃警告的问题。[#37537](https://github.com/ant-design/ant-design/pull/37537) [@edc-hui](https://github.com/edc-hui)
+- 🐞 修复 Table `filterMode="tree"` 时 `filterSearch` 函数未执行的问题。[#37587](https://github.com/ant-design/ant-design/pull/37587) [@edc-hui](https://github.com/edc-hui)
+- 🐞 修复 Tooltip 的子元素 `className` 非 string 类型时会被覆盖的问题。[#37598](https://github.com/ant-design/ant-design/pull/37598)
+- 🐞 修复 Tree 组件 TreeNode 在可拖拽并且禁用状态下不对齐的问题。[#37534](https://github.com/ant-design/ant-design/pull/37534)
+- TypeScript
+  - 🤖 替换已废弃的 `React.ReactChild` 定义。[#37551](https://github.com/ant-design/ant-design/pull/37551) [@bowen-wu](https://github.com/bowen-wu)
+
+## 4.23.1
+
+`2022-09-09`
+
+- 🐞 修复 `Modal.confirm().update({visible: true})` 导致无法关闭 modal 的问题。[#37471](https://github.com/ant-design/ant-design/pull/37471) [@Aaron674092290](https://github.com/Aaron674092290)
+- 🐞 兜底修复 esbuild 严格模式构建时报 `No matching export theme` 错误。[#37462](https://github.com/ant-design/ant-design/pull/37462)
+- 🐞 回滚 [#35103](https://github.com/ant-design/ant-design/pull/35103) 以修复 Switch 切换时背景闪烁的问题。[#37458](https://github.com/ant-design/ant-design/pull/37458)
+- TypeScript
+  - 🤖 InputNumber `value` 新增类型 null。[#37421](https://github.com/ant-design/ant-design/pull/37421) [@li-jia-nan](https://github.com/li-jia-nan)
+
 ## 4.23.0

 `2022-09-04`
@ -30,7 +51,7 @@ timeline: true
  - 🛠 Table 组件 `columns` 中的 `filterDropdownVisible` 改为 `filterDropdownOpen`。[#37026](https://github.com/ant-design/ant-design/pull/37026) [@yykoypj](https://github.com/yykoypj)
  - 🛠 Tooltip, Popover 和 Popconfirm 中的 `visible` 改为 `open`。[#37241](https://github.com/ant-design/ant-design/pull/37241) [@yykoypj](https://github.com/yykoypj)
  - 🛠 Slider 的 `tooltip` 相关属性合并到 `tooltip` 属性中。[#37000](https://github.com/ant-design/ant-design/pull/37000) [@yykoypj](https://github.com/yykoypj)
-  - 🛠 移除 Tag 组件的 `visible` 属性。[#36934](https://github.com/ant-design/ant-design/pull/36934) [@yykoypj](https://github.com/yykoypj)
+  - 🛠 废弃 Tag 组件的 `visible` 属性。[#36934](https://github.com/ant-design/ant-design/pull/36934) [@yykoypj](https://github.com/yykoypj)
 - 🛠 废弃所有组件的 `dropdownClassName`，统一为 `popupClassName`。[#36880](https://github.com/ant-design/ant-design/pull/36880) [@heiyu4585](https://github.com/heiyu4585)
 - 🛠 Tabs 支持 `items` 属性，并且废弃原 jsx 语法糖用法。[#36889](https://github.com/ant-design/ant-design/pull/36889)
 - 🐞 修复 css 变量与 less 变量不一致的问题。
@ -44,8 +65,6 @@ timeline: true
 - 🌐 补全 `ru_RU` 中 `filterCheckall` 的翻译。[#37311](https://github.com/ant-design/ant-design/pull/37311) [@HelLuv](https://github.com/HelLuv)
 - 🌐 补全 `cs_CZ` 的翻译。[#37388](https://github.com/ant-design/ant-design/pull/37388) [@ZdenekKrcal](https://github.com/ZdenekKrcal)

---
-
 ## 4.22.8

 `2022-08-26`
@ -195,7 +214,7 @@ timeline: true
  - 🐞 Table 取消选择或批量操作时重置上一次选择的 key。[#34705](https://github.com/ant-design/ant-design/pull/34705) [@Dunqing](https://github.com/Dunqing)
  - 🐞 修复 Table 过滤列表在某些场景下多级展开无法关闭的问题。[#36132](https://github.com/ant-design/ant-design/pull/36132)
 - 🐞 修复 Upload `listType="picture-card"` 当 children 为空时上传文件按钮没有隐藏的问题。[#36196](https://github.com/ant-design/ant-design/pull/36196)
- 🐞 修复 Popover 自定义 `color` 时箭头颜色问题。[#36241](https://github.com/ant-design/ant-design/pull/36241) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Popover 自定义 `color` 时箭头颜色问题。[#36241](https://github.com/ant-design/ant-design/pull/36241)
 - 🐞 修复 Menu `item={undefined}` 时会有废弃警告的问题。[#36190](https://github.com/ant-design/ant-design/pull/36190)
 - 💄 修复 Button `loading` 图标的间距丢失的问题。[#36168](https://github.com/ant-design/ant-design/pull/36168)
 - 🐞 修复 Dropdown 中 Menu 分组下的 Item 点击不会关闭的问题。[#36148](https://github.com/ant-design/ant-design/pull/36148)
@ -413,12 +432,12 @@ timeline: true
 - 🐞 修复 Title、Text、Paragraph 组件不支持 `ref` 的问题。[#34847](https://github.com/ant-design/ant-design/pull/34847) [@MQuy](https://github.com/MQuy)
 - Input
  - 💄 Input.Group 对子组件屏蔽 Form.Item 的样式。[#34764](https://github.com/ant-design/ant-design/pull/34764)
-  - 💄 调整 Form 下 TextArea 的样式。[#34714](https://github.com/ant-design/ant-design/pull/34714) [@MadCcc](https://github.com/MadCcc)
+  - 💄 调整 Form 下 TextArea 的样式。[#34714](https://github.com/ant-design/ant-design/pull/34714)
 - ⌨️ 修复 Checkbox 缺少 `aria-checked` 属性导致屏幕阅读器识别错误的问题。[#34862](https://github.com/ant-design/ant-design/pull/34862) [@SpaNb4](https://github.com/SpaNb4)
 - Less
  - 💄 替换 less 中的 html 选择器为对应变量。[#35186](https://github.com/ant-design/ant-design/pull/35186) [@jeffdrumgod](https://github.com/jeffdrumgod)
  - 💄 修改 less 中 `danger` 值从函数改为变量。[#35113](https://github.com/ant-design/ant-design/pull/35113) [@TrickyPi](https://github.com/TrickyPi)
-  - 🐞 箭头圆角使用固定值 2px 变量。[#35086](https://github.com/ant-design/ant-design/pull/35086) [@MadCcc](https://github.com/MadCcc)
+  - 🐞 箭头圆角使用固定值 2px 变量。[#35086](https://github.com/ant-design/ant-design/pull/35086)
 - TypeScript
  - 🤖 修正 Upload 组件中 `UploadChangeParam<T>` 内部 `fileList` 不使用泛型问题。[#35158](https://github.com/ant-design/ant-design/pull/35158) [@rendaoer](https://github.com/rendaoer)
  - 🤖 更新 TypeScript 定义以兼容 `@types/react@18`。[#35075](https://github.com/ant-design/ant-design/pull/35075) [@AliRezaBeigy](https://github.com/AliRezaBeigy) [#35076](https://github.com/ant-design/ant-design/pull/35076) [@littledian](https://github.com/littledian)
@ -574,7 +593,7 @@ timeline: true
 - 💄 优化 Menu `:focus-visible` 的样式。[#34008](https://github.com/ant-design/ant-design/pull/34008)
 - 💄 修复 Pagination 和 Rate 在 Safari 下部分样式丢失的问题，比如分页按钮禁用样式失效。[#34002](https://github.com/ant-design/ant-design/pull/34002)
 - 💄 修复 Row 与 Col 在配置 `prefixCls` 的样式问题。[#33969](https://github.com/ant-design/ant-design/pull/33969) [@mic-web](https://github.com/mic-web)
- 🐞 修复 Timeline 的自定义图标颜色无效的问题。[#33951](https://github.com/ant-design/ant-design/pull/33951) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Timeline 的自定义图标颜色无效的问题。[#33951](https://github.com/ant-design/ant-design/pull/33951)
 - TypeScript
  - 🤖 优化 Cascader `multiple` 属性对应的 `onChange` 类型推断。[#33947](https://github.com/ant-design/ant-design/pull/33947) [@babycannotsay](https://github.com/babycannotsay)

@ -657,7 +676,7 @@ timeline: true

 `2021-12-29`

- 🐞 修复 Popconfirm 在某些情况下会出现 `Can't perform a React state update on an unmounted component.` 的错误。[#33432](https://github.com/ant-design/ant-design/pull/33432) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Popconfirm 在某些情况下会出现 `Can't perform a React state update on an unmounted component.` 的错误。[#33432](https://github.com/ant-design/ant-design/pull/33432)
 - 🐞 修复 Input 配置 `suffix` 时 `value` 为数字类型会崩溃的问题。[#33462](https://github.com/ant-design/ant-design/pull/33462)
 - 🐞 修复 Divider with text dashed 的边框颜色错误问题。[#33452](https://github.com/ant-design/ant-design/pull/33452) [@chen-jingjie](https://github.com/chen-jingjie)
 - 🐞 修复 Dropdown.Button 不支持 `destroyPopupOnHide` 的问题。[#33442](https://github.com/ant-design/ant-design/pull/33442) [@LongHaoo](https://github.com/LongHaoo)
--- a/components/tests/snapshots/index.test.ts.snap
+++ b/components/tests/snapshots/index.test.ts.snap
@ -67,6 +67,7 @@ Array [
  "Upload",
  "message",
  "notification",
+  "theme",
  "version",
 ]
 `;
--- a/components/tests/node.test.tsx
+++ b/components/tests/node.test.tsx
@ -0,0 +1,48 @@
+import glob from 'glob';
+import * as React from 'react';
+import { renderToString } from 'react-dom/server';
+import type { Options } from '../../tests/shared/demoTest';
+
+(global as any).testConfig = {};
+
+jest.mock('../../tests/shared/demoTest', () => {
+  function fakeDemoTest(name: string, option: Options = {}) {
+    (global as any).testConfig[name] = option;
+  }
+
+  return fakeDemoTest;
+});
+
+describe('node', () => {
+  beforeAll(() => {
+    jest.useFakeTimers().setSystemTime(new Date('2016-11-22'));
+  });
+
+  // Find the component exist demo test file
+  const files = glob.sync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`);
+
+  files.forEach(componentTestFile => {
+    const componentName = componentTestFile.match(/components\/([^/]*)\//)![1];
+
+    // Test for ssr
+    describe(componentName, () => {
+      const demoList = glob.sync(`./components/${componentName}/demo/*.md`);
+
+      // Use mock to get config
+      require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require
+      const option = (global as any).testConfig?.[componentName];
+
+      demoList.forEach(demoFile => {
+        const skip: string[] = option?.skip || [];
+        const test = skip.some(skipMarkdown => demoFile.includes(skipMarkdown)) ? it.skip : it;
+
+        test(demoFile, () => {
+          const Demo = require(`../../${demoFile}`).default; // eslint-disable-line global-require, import/no-dynamic-require
+          expect(() => {
+            renderToString(<Demo />);
+          }).not.toThrow();
+        });
+      });
+    });
+  });
+});
--- a/components/_util/reactNode.ts
+++ b/components/_util/reactNode.ts
@ -6,17 +6,18 @@ export function isFragment(child: React.ReactElement): boolean {
  return child && child.type === React.Fragment;
 }

-type AnyObject = Record<any, any>;
+type AnyObject = Record<PropertyKey, any>;

-type RenderProps = undefined | AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
+type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void);

 export function replaceElement(
  element: React.ReactNode,
  replacement: React.ReactNode,
-  props: RenderProps,
+  props?: RenderProps,
 ): React.ReactNode {
-  if (!isValidElement(element)) return replacement;
-
+  if (!isValidElement(element)) {
+    return replacement;
+  }
  return React.cloneElement(
    element,
    typeof props === 'function' ? props(element.props || {}) : props,
--- a/components/affix/tests/Affix.test.tsx
+++ b/components/affix/tests/Affix.test.tsx
@ -65,6 +65,11 @@ describe('Affix Render', () => {
    } as DOMRect,
  };

+  beforeEach(() => {
+    const entities = getObserverEntities();
+    entities.splice(0, entities.length);
+  });
+
  beforeAll(() => {
    domMock.mockImplementation(function fn(this: HTMLElement) {
      return (
@ -171,22 +176,20 @@ describe('Affix Render', () => {
    });

    it('instance change', async () => {
-      const getObserverLength = () => Object.keys(getObserverEntities()).length;
-
      const container = document.createElement('div');
      document.body.appendChild(container);
      let target: HTMLDivElement | null = container;

-      const originLength = getObserverLength();
      const getTarget = () => target;
      const { rerender } = render(<Affix target={getTarget}>{null}</Affix>);
      await sleep(100);
+      expect(getObserverEntities()).toHaveLength(1);
+      expect(getObserverEntities()[0].target).toBe(container);

-      expect(getObserverLength()).toBe(originLength + 1);
      target = null;
      rerender(<Affix>{null}</Affix>);
-      await sleep(100);
-      expect(getObserverLength()).toBe(originLength);
+      expect(getObserverEntities()).toHaveLength(1);
+      expect(getObserverEntities()[0].target).toBe(window);
    });
  });

--- a/components/affix/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/affix/tests/snapshots/demo-extend.test.ts.snap
@ -36,7 +36,7 @@ Array [

 exports[`renders ./components/affix/demo/debug.md extend context correctly 1`] = `
 <div
-  style="height:10000px"
+  style="height: 10000px;"
 >
  <div>
    Top
@ -46,7 +46,7 @@ exports[`renders ./components/affix/demo/debug.md extend context correctly 1`] =
      class=""
    >
      <div
-        style="background:red"
+        style="background: red;"
      >
        <button
          class="ant-btn ant-btn-primary"
--- a/components/affix/tests/snapshots/demo.test.ts.snap
+++ b/components/affix/tests/snapshots/demo.test.ts.snap
@ -36,7 +36,7 @@ Array [

 exports[`renders ./components/affix/demo/debug.md correctly 1`] = `
 <div
-  style="height:10000px"
+  style="height: 10000px;"
 >
  <div>
    Top
@ -46,7 +46,7 @@ exports[`renders ./components/affix/demo/debug.md correctly 1`] = `
      class=""
    >
      <div
-        style="background:red"
+        style="background: red;"
      >
        <button
          class="ant-btn ant-btn-primary"
--- a/components/alert/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/alert/tests/snapshots/demo-extend.test.ts.snap
@ -214,7 +214,7 @@ Array [
      >
        <div
          class="ant-space-item"
-          style="margin-bottom:8px"
+          style="margin-bottom: 8px;"
        >
          <button
            class="ant-btn ant-btn-primary ant-btn-sm"
@ -1352,7 +1352,25 @@ exports[`renders ./components/alert/demo/loop-banner.md extend context correctly
  >
    <div
      class="ant-alert-message"
-    />
+    >
+      <div
+        class=" marquee-container"
+        style="--pause-on-hover: paused; --pause-on-click: running;"
+      >
+        <div
+          class="marquee"
+          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
+        >
+          I can be a React component, multiple React components, or just some text.
+        </div>
+        <div
+          class="marquee"
+          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
+        >
+          I can be a React component, multiple React components, or just some text.
+        </div>
+      </div>
+    </div>
  </div>
 </div>
 `;
--- a/components/alert/tests/snapshots/demo.test.ts.snap
+++ b/components/alert/tests/snapshots/demo.test.ts.snap
@ -214,7 +214,7 @@ Array [
      >
        <div
          class="ant-space-item"
-          style="margin-bottom:8px"
+          style="margin-bottom: 8px;"
        >
          <button
            class="ant-btn ant-btn-primary ant-btn-sm"
@ -1352,7 +1352,25 @@ exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
  >
    <div
      class="ant-alert-message"
-    />
+    >
+      <div
+        class=" marquee-container"
+        style="--pause-on-hover: paused; --pause-on-click: running;"
+      >
+        <div
+          class="marquee"
+          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
+        >
+          I can be a React component, multiple React components, or just some text.
+        </div>
+        <div
+          class="marquee"
+          style="--play: running; --direction: normal; --duration: 0s; --delay: 0s; --iteration-count: infinite;"
+        >
+          I can be a React component, multiple React components, or just some text.
+        </div>
+      </div>
+    </div>
  </div>
 </div>
 `;
--- a/components/alert/tests/snapshots/index.test.tsx.snap
+++ b/components/alert/tests/snapshots/index.test.tsx.snap
@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Alert action of Alert custom action 1`] = `
+exports[`Alert custom action 1`] = `
 <div
  class="ant-alert ant-alert-success"
  data-show="true"
@ -74,29 +74,6 @@ exports[`Alert action of Alert custom action 1`] = `
 </div>
 `;

-exports[`Alert could accept none react element icon 1`] = `
-<div
-  class="ant-alert ant-alert-success"
-  data-show="true"
-  role="alert"
->
-  <span
-    class="ant-alert-icon"
-  >
-    icon
-  </span>
-  <div
-    class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    >
-      Success Tips
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
  class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-rtl"
@ -108,30 +85,3 @@ exports[`Alert rtl render component should be rendered correctly in RTL directio
  />
 </div>
 `;
-
-exports[`Alert support closeIcon 1`] = `
-<div
-  class="ant-alert ant-alert-warning ant-alert-no-icon"
-  data-show="true"
-  role="alert"
->
-  <div
-    class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    >
-      Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
-    </div>
-  </div>
-  <button
-    class="ant-alert-close-icon"
-    tabindex="0"
-    type="button"
-  >
-    <span>
-      close
-    </span>
-  </button>
-</div>
-`;
--- a/components/alert/tests/demo-extend.test.ts
+++ b/components/alert/tests/demo-extend.test.ts
@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';

-extendTest('alert');
+extendTest('alert', { skip: ['loop-banner.md'] });
--- a/components/alert/tests/demo.test.ts
+++ b/components/alert/tests/demo.test.ts
@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';

-demoTest('alert');
+demoTest('alert', { skip: ['loop-banner.md'] });
--- a/components/alert/tests/index.test.tsx
+++ b/components/alert/tests/index.test.tsx
@ -1,8 +1,9 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 import Alert from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render, sleep, act } from '../../../tests/utils';
+import { render, act, screen } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
@ -21,9 +22,9 @@ describe('Alert', () => {
    jest.useRealTimers();
  });

-  it('could be closed', () => {
+  it('should show close button and could be closed', async () => {
    const onClose = jest.fn();
-    const { container } = render(
+    render(
      <Alert
        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
        type="warning"
@ -32,125 +33,102 @@ describe('Alert', () => {
      />,
    );

-    jest.useFakeTimers();
-    fireEvent.click(container.querySelector('.ant-alert-close-icon')!);
+    await userEvent.click(screen.getByRole('button', { name: /close/i }));
+
    act(() => {
      jest.runAllTimers();
    });
-    expect(onClose).toHaveBeenCalled();
-    jest.useRealTimers();
+
+    expect(onClose).toHaveBeenCalledTimes(1);
  });

-  describe('action of Alert', () => {
-    it('custom action', () => {
-      const { container } = render(
-        <Alert
-          message="Success Tips"
-          type="success"
-          showIcon
-          action={
-            <Button size="small" type="text">
-              UNDO
-            </Button>
-          }
-          closable
-        />,
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-
-  it('support closeIcon', () => {
+  it('custom action', () => {
    const { container } = render(
      <Alert
+        message="Success Tips"
+        type="success"
+        showIcon
+        action={
+          <Button size="small" type="text">
+            UNDO
+          </Button>
+        }
        closable
-        closeIcon={<span>close</span>}
-        message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-        type="warning"
      />,
    );
    expect(container.firstChild).toMatchSnapshot();
  });

-  describe('data and aria props', () => {
-    it('sets data attributes on input', () => {
-      const { container } = render(<Alert data-test="test-id" data-id="12345" message={null} />);
-      const input = container.querySelector('.ant-alert')!;
-      expect(input.getAttribute('data-test')).toBe('test-id');
-      expect(input.getAttribute('data-id')).toBe('12345');
-    });
-
-    it('sets aria attributes on input', () => {
-      const { container } = render(<Alert aria-describedby="some-label" message={null} />);
-      const input = container.querySelector('.ant-alert')!;
-      expect(input.getAttribute('aria-describedby')).toBe('some-label');
-    });
-
-    it('sets role attribute on input', () => {
-      const { container } = render(<Alert role="status" message={null} />);
-      const input = container.querySelector('.ant-alert')!;
-      expect(input.getAttribute('role')).toBe('status');
-    });
+  it('should sets data attributes on alert when pass attributes to props', () => {
+    render(
+      <Alert data-test="test-id" data-id="12345" aria-describedby="some-label" message={null} />,
+    );
+    const alert = screen.getByRole('alert');
+    expect(alert).toHaveAttribute('data-test', 'test-id');
+    expect(alert).toHaveAttribute('data-id', '12345');
+    expect(alert).toHaveAttribute('aria-describedby', 'some-label');
  });

-  it('ErrorBoundary', () => {
+  it('sets role attribute on input', () => {
+    render(<Alert role="status" message={null} />);
+
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('should show error as ErrorBoundary when children have error', () => {
    jest.spyOn(console, 'error').mockImplementation(() => undefined);
    // eslint-disable-next-line no-console
    expect(console.error).toHaveBeenCalledTimes(0);
    // @ts-expect-error
    // eslint-disable-next-line react/jsx-no-undef
    const ThrowError = () => <NotExisted />;
-    const { container } = render(
+    render(
      <ErrorBoundary>
        <ThrowError />
      </ErrorBoundary>,
    );
-    // eslint-disable-next-line jest/no-standalone-expect
-    expect(container.textContent).toContain('ReferenceError: NotExisted is not defined');
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'ReferenceError: NotExisted is not defined',
+    );
    // eslint-disable-next-line no-console
    (console.error as any).mockRestore();
  });

  it('could be used with Tooltip', async () => {
-    const ref = React.createRef<any>();
-    jest.useRealTimers();
-    const { container } = render(
-      <Tooltip title="xxx" mouseEnterDelay={0} ref={ref}>
+    render(
+      <Tooltip title="xxx" mouseEnterDelay={0}>
        <Alert
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          type="warning"
        />
      </Tooltip>,
    );
-    // wrapper.find('.ant-alert').simulate('mouseenter');
-    fireEvent.mouseEnter(container.querySelector('.ant-alert')!);
-    await sleep(0);
-    expect(ref.current.getPopupDomNode()).toBeTruthy();
-    jest.useFakeTimers();
+
+    await userEvent.hover(screen.getByRole('alert'));
+
+    expect(screen.getByRole('tooltip')).toBeInTheDocument();
  });

  it('could be used with Popconfirm', async () => {
-    const ref = React.createRef<any>();
-    jest.useRealTimers();
-    const { container } = render(
-      <Popconfirm ref={ref} title="xxx">
+    render(
+      <Popconfirm title="xxx">
        <Alert
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          type="warning"
        />
      </Popconfirm>,
    );
-    fireEvent.click(container.querySelector('.ant-alert')!);
-    await sleep(0);
-    expect(ref.current.getPopupDomNode()).toBeTruthy();
-    jest.useFakeTimers();
+    await userEvent.click(screen.getByRole('alert'));
+
+    expect(screen.getByRole('tooltip')).toBeInTheDocument();
  });

  it('could accept none react element icon', () => {
-    const { container } = render(
-      <Alert message="Success Tips" type="success" showIcon icon="icon" />,
-    );
-    expect(container.firstChild).toMatchSnapshot();
+    render(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
+
+    expect(screen.getByRole('alert')).toHaveTextContent(/success tips/i);
+    expect(screen.getByRole('alert')).toHaveTextContent(/icon/i);
  });

  it('should not render message div when no message', () => {
--- a/components/anchor/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/anchor/tests/snapshots/demo-extend.test.ts.snap
@ -7,7 +7,7 @@ exports[`renders ./components/anchor/demo/basic.md extend context correctly 1`]
  >
    <div
      class="ant-anchor-wrapper"
-      style="max-height:100vh"
+      style="max-height: 100vh;"
    >
      <div
        class="ant-anchor"
@ -83,7 +83,7 @@ exports[`renders ./components/anchor/demo/basic.md extend context correctly 1`]
 exports[`renders ./components/anchor/demo/customizeHighlight.md extend context correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -92,7 +92,8 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md extend context c
      class="ant-anchor-ink"
    >
      <span
-        class="ant-anchor-ink-ball"
+        class="ant-anchor-ink-ball visible"
+        style="top: -4.5px;"
      />
    </div>
    <div
@ -107,10 +108,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md extend context c
      </a>
    </div>
    <div
-      class="ant-anchor-link"
+      class="ant-anchor-link ant-anchor-link-active"
    >
      <a
-        class="ant-anchor-link-title"
+        class="ant-anchor-link-title ant-anchor-link-title-active"
        href="#components-anchor-demo-static"
        title="Static demo"
      >
@ -157,7 +158,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md extend context c
 exports[`renders ./components/anchor/demo/onChange.md extend context correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -231,7 +232,7 @@ exports[`renders ./components/anchor/demo/onChange.md extend context correctly 1
 exports[`renders ./components/anchor/demo/onClick.md extend context correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -305,7 +306,7 @@ exports[`renders ./components/anchor/demo/onClick.md extend context correctly 1`
 exports[`renders ./components/anchor/demo/static.md extend context correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -383,7 +384,7 @@ exports[`renders ./components/anchor/demo/targetOffset.md extend context correct
  >
    <div
      class="ant-anchor-wrapper"
-      style="max-height:100vh"
+      style="max-height: 100vh;"
    >
      <div
        class="ant-anchor"
--- a/components/anchor/tests/snapshots/demo.test.ts.snap
+++ b/components/anchor/tests/snapshots/demo.test.ts.snap
@ -7,7 +7,7 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
  >
    <div
      class="ant-anchor-wrapper"
-      style="max-height:100vh"
+      style="max-height: 100vh;"
    >
      <div
        class="ant-anchor"
@ -83,7 +83,7 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
 exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -92,7 +92,8 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] =
      class="ant-anchor-ink"
    >
      <span
-        class="ant-anchor-ink-ball"
+        class="ant-anchor-ink-ball visible"
+        style="top: -4.5px;"
      />
    </div>
    <div
@ -107,10 +108,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] =
      </a>
    </div>
    <div
-      class="ant-anchor-link"
+      class="ant-anchor-link ant-anchor-link-active"
    >
      <a
-        class="ant-anchor-link-title"
+        class="ant-anchor-link-title ant-anchor-link-title-active"
        href="#components-anchor-demo-static"
        title="Static demo"
      >
@ -157,7 +158,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] =
 exports[`renders ./components/anchor/demo/onChange.md correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -231,7 +232,7 @@ exports[`renders ./components/anchor/demo/onChange.md correctly 1`] = `
 exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -305,7 +306,7 @@ exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
 exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
 <div
  class="ant-anchor-wrapper"
-  style="max-height:100vh"
+  style="max-height: 100vh;"
 >
  <div
    class="ant-anchor ant-anchor-fixed"
@ -383,7 +384,7 @@ exports[`renders ./components/anchor/demo/targetOffset.md correctly 1`] = `
  >
    <div
      class="ant-anchor-wrapper"
-      style="max-height:100vh"
+      style="max-height: 100vh;"
    >
      <div
        class="ant-anchor"
--- a/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo-extend.test.ts.snap
--- a/components/auto-complete/tests/snapshots/demo.test.ts.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.ts.snap
@ -4,7 +4,7 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 Array [
  <div
    class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
-    style="width:200px"
+    style="width: 200px;"
  >
    <div
      class="ant-select-selector"
@ -13,13 +13,14 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="undefined_list_0"
+          aria-activedescendant="rc_select_test_list_test"
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          role="combobox"
          type="search"
          value=""
@ -36,7 +37,7 @@ Array [
  <br />,
  <div
    class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
-    style="width:200px"
+    style="width: 200px;"
  >
    <div
      class="ant-select-selector"
@ -45,13 +46,14 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="undefined_list_0"
+          aria-activedescendant="rc_select_test_list_test"
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          role="combobox"
          type="search"
          value=""
@ -70,7 +72,7 @@ Array [
 exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-  style="width:250px"
+  style="width: 250px;"
 >
  <div
    class="ant-select-selector"
@ -85,13 +87,14 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
          class="ant-input-wrapper ant-input-group"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-input ant-input-lg"
+            id="rc_select_test"
            placeholder="input here"
            role="combobox"
            type="search"
@ -138,7 +141,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
 exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-  style="width:200px"
+  style="width: 200px;"
 >
  <div
    class="ant-select-selector"
@ -147,16 +150,17 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
      class="ant-select-selection-search"
    >
      <textarea
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_test_list_test"
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-input ant-select-selection-search-input custom"
+        id="rc_select_test"
        placeholder="input here"
        role="combobox"
-        style="height:50px"
+        style="height: 50px;"
        type="search"
      />
    </span>
@ -170,7 +174,7 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
 exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
-  style="margin:0 auto"
+  style="margin: 0px auto;"
 >
  <div
    class="ant-form-item"
@ -207,13 +211,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  class="ant-select-selection-search"
                >
                  <input
-                    aria-activedescendant="undefined_list_0"
+                    aria-activedescendant="rc_select_test_list_test"
                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
+                    aria-controls="rc_select_test_list"
                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
+                    aria-owns="rc_select_test_list"
                    autocomplete="off"
                    class="ant-select-selection-search-input"
+                    id="rc_select_test"
                    role="combobox"
                    type="search"
                    value=""
@ -265,14 +270,15 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                >
                  <input
                    aria-autocomplete="list"
-                    aria-controls="undefined_list"
+                    aria-controls="rc_select_test_list"
                    aria-haspopup="listbox"
-                    aria-owns="undefined_list"
+                    aria-owns="rc_select_test_list"
                    autocomplete="off"
                    class="ant-select-selection-search-input"
+                    id="rc_select_test"
                    readonly=""
                    role="combobox"
-                    style="opacity:0"
+                    style="opacity: 0;"
                    type="search"
                    unselectable="on"
                    value=""
@ -285,7 +291,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
              <span
                aria-hidden="true"
                class="ant-select-arrow"
-                style="user-select:none;-webkit-user-select:none"
+                style="user-select: none;"
                unselectable="on"
              >
                <span
@ -344,7 +350,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
            >
              <div
                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-                style="width:30%"
+                style="width: 30%;"
              >
                <div
                  class="ant-select-selector"
@ -354,14 +360,15 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="undefined_list"
+                      aria-controls="rc_select_test_list"
                      aria-haspopup="listbox"
-                      aria-owns="undefined_list"
+                      aria-owns="rc_select_test_list"
                      autocomplete="off"
                      class="ant-select-selection-search-input"
+                      id="rc_select_test"
                      readonly=""
                      role="combobox"
-                      style="opacity:0"
+                      style="opacity: 0;"
                      type="search"
                      unselectable="on"
                      value=""
@ -374,7 +381,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select:none;-webkit-user-select:none"
+                  style="user-select: none;"
                  unselectable="on"
                >
                  <span
@ -408,13 +415,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                    class="ant-select-selection-search"
                  >
                    <input
-                      aria-activedescendant="undefined_list_0"
+                      aria-activedescendant="rc_select_test_list_test"
                      aria-autocomplete="list"
-                      aria-controls="undefined_list"
+                      aria-controls="rc_select_test_list"
                      aria-haspopup="listbox"
-                      aria-owns="undefined_list"
+                      aria-owns="rc_select_test_list"
                      autocomplete="off"
                      class="ant-select-selection-search-input"
+                      id="rc_select_test"
                      role="combobox"
                      type="search"
                      value=""
@ -469,13 +477,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                    class="ant-input-affix-wrapper ant-select-selection-search-input"
                  >
                    <input
-                      aria-activedescendant="undefined_list_0"
+                      aria-activedescendant="rc_select_test_list_test"
                      aria-autocomplete="list"
-                      aria-controls="undefined_list"
+                      aria-controls="rc_select_test_list"
                      aria-haspopup="listbox"
-                      aria-owns="undefined_list"
+                      aria-owns="rc_select_test_list"
                      autocomplete="off"
                      class="ant-input"
+                      id="rc_select_test"
                      role="combobox"
                      type="search"
                      value=""
@ -545,7 +554,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
            >
              <div
                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-                style="width:30%"
+                style="width: 30%;"
              >
                <div
                  class="ant-select-selector"
@ -555,14 +564,15 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="undefined_list"
+                      aria-controls="rc_select_test_list"
                      aria-haspopup="listbox"
-                      aria-owns="undefined_list"
+                      aria-owns="rc_select_test_list"
                      autocomplete="off"
                      class="ant-select-selection-search-input"
+                      id="rc_select_test"
                      readonly=""
                      role="combobox"
-                      style="opacity:0"
+                      style="opacity: 0;"
                      type="search"
                      unselectable="on"
                      value=""
@ -575,7 +585,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select:none;-webkit-user-select:none"
+                  style="user-select: none;"
                  unselectable="on"
                >
                  <span
@ -612,13 +622,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                      class="ant-input-affix-wrapper ant-select-selection-search-input"
                    >
                      <input
-                        aria-activedescendant="undefined_list_0"
+                        aria-activedescendant="rc_select_test_list_test"
                        aria-autocomplete="list"
-                        aria-controls="undefined_list"
+                        aria-controls="rc_select_test_list"
                        aria-haspopup="listbox"
-                        aria-owns="undefined_list"
+                        aria-owns="rc_select_test_list"
                        autocomplete="off"
                        class="ant-input"
+                        id="rc_select_test"
                        role="combobox"
                        type="search"
                        value=""
@ -689,7 +700,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
            >
              <div
                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-                style="width:30%"
+                style="width: 30%;"
              >
                <div
                  class="ant-select-selector"
@ -699,14 +710,15 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="undefined_list"
+                      aria-controls="rc_select_test_list"
                      aria-haspopup="listbox"
-                      aria-owns="undefined_list"
+                      aria-owns="rc_select_test_list"
                      autocomplete="off"
                      class="ant-select-selection-search-input"
+                      id="rc_select_test"
                      readonly=""
                      role="combobox"
-                      style="opacity:0"
+                      style="opacity: 0;"
                      type="search"
                      unselectable="on"
                      value=""
@ -719,7 +731,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select:none;-webkit-user-select:none"
+                  style="user-select: none;"
                  unselectable="on"
                >
                  <span
@ -759,13 +771,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                        class="ant-input-wrapper ant-input-group"
                      >
                        <input
-                          aria-activedescendant="undefined_list_0"
+                          aria-activedescendant="rc_select_test_list_test"
                          aria-autocomplete="list"
-                          aria-controls="undefined_list"
+                          aria-controls="rc_select_test_list"
                          aria-haspopup="listbox"
-                          aria-owns="undefined_list"
+                          aria-owns="rc_select_test_list"
                          autocomplete="off"
                          class="ant-input"
+                          id="rc_select_test"
                          role="combobox"
                          type="search"
                          value=""
@ -842,7 +855,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
            >
              <div
                class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-                style="width:20%"
+                style="width: 20%;"
              >
                <div
                  class="ant-select-selector"
@ -852,14 +865,15 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="undefined_list"
+                      aria-controls="rc_select_test_list"
                      aria-haspopup="listbox"
-                      aria-owns="undefined_list"
+                      aria-owns="rc_select_test_list"
                      autocomplete="off"
                      class="ant-select-selection-search-input"
+                      id="rc_select_test"
                      readonly=""
                      role="combobox"
-                      style="opacity:0"
+                      style="opacity: 0;"
                      type="search"
                      unselectable="on"
                      value=""
@ -872,7 +886,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select:none;-webkit-user-select:none"
+                  style="user-select: none;"
                  unselectable="on"
                >
                  <span
@ -912,13 +926,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                        class="ant-input-wrapper ant-input-group"
                      >
                        <input
-                          aria-activedescendant="undefined_list_0"
+                          aria-activedescendant="rc_select_test_list_test"
                          aria-autocomplete="list"
-                          aria-controls="undefined_list"
+                          aria-controls="rc_select_test_list"
                          aria-haspopup="listbox"
-                          aria-owns="undefined_list"
+                          aria-owns="rc_select_test_list"
                          autocomplete="off"
                          class="ant-input"
+                          id="rc_select_test"
                          role="combobox"
                          type="search"
                          value=""
@ -998,7 +1013,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
 exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
-  style="width:200px"
+  style="width: 200px;"
 >
  <div
    class="ant-select-selector"
@ -1007,13 +1022,14 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
      class="ant-select-selection-search"
    >
      <input
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_test_list_test"
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        role="combobox"
        type="search"
        value=""
@ -1031,7 +1047,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
 exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
-  style="width:200px"
+  style="width: 200px;"
 >
  <div
    class="ant-select-selector"
@ -1040,13 +1056,14 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
      class="ant-select-selection-search"
    >
      <input
-        aria-activedescendant="undefined_list_0"
+        aria-activedescendant="rc_select_test_list_test"
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        role="combobox"
        type="search"
        value=""
@ -1064,15 +1081,15 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-select ant-select-status-error ant-select-auto-complete ant-select-single ant-select-show-search"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -1081,13 +1098,14 @@ exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -1104,7 +1122,7 @@ exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
  >
    <div
      class="ant-select ant-select-status-warning ant-select-auto-complete ant-select-single ant-select-show-search"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -1113,13 +1131,14 @@ exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -1137,7 +1156,7 @@ exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
 exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-  style="width:300px"
+  style="width: 300px;"
 >
  <div
    class="ant-select-selector"
@ -1152,13 +1171,14 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
          class="ant-input-wrapper ant-input-group"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-input ant-input-lg"
+            id="rc_select_test"
            placeholder="input here"
            role="combobox"
            type="search"
--- a/components/avatar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/avatar/tests/snapshots/demo-extend.test.ts.snap
@ -38,7 +38,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -90,7 +90,7 @@ Array [
  <div>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="width:64px;height:64px;line-height:64px;font-size:32px"
+      style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
    >
      <span
        aria-label="user"
@ -185,7 +185,7 @@ Array [
  <div>
    <span
      class="ant-avatar ant-avatar-square ant-avatar-icon"
-      style="width:64px;height:64px;line-height:64px;font-size:32px"
+      style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
    >
      <span
        aria-label="user"
@ -284,18 +284,18 @@ exports[`renders ./components/avatar/demo/dynamic.md extend context correctly 1`
 Array [
  <span
    class="ant-avatar ant-avatar-lg ant-avatar-circle"
-    style="background-color:#f56a00;vertical-align:middle"
+    style="background-color: rgb(245, 106, 0); vertical-align: middle;"
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    >
      U
    </span>
  </span>,
  <button
    class="ant-btn ant-btn-default ant-btn-sm"
-    style="margin:0 16px;vertical-align:middle"
+    style="margin: 0px 16px; vertical-align: middle;"
    type="button"
  >
    <span>
@ -304,7 +304,7 @@ Array [
  </button>,
  <button
    class="ant-btn ant-btn-default ant-btn-sm"
-    style="vertical-align:middle"
+    style="vertical-align: middle;"
    type="button"
  >
    <span>
@ -347,18 +347,18 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="background-color:#87d068"
+      style="background-color: rgb(135, 208, 104);"
    >
      <span
        aria-label="user"
@ -382,8 +382,8 @@ Array [
    </span>
    <div>
      <div
-        class="ant-tooltip"
-        style="opacity:0"
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+        style="opacity: 0;"
      >
        <div
          class="ant-tooltip-content"
@ -406,7 +406,7 @@ Array [
    </div>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="background-color:#1890ff"
+      style="background-color: rgb(24, 144, 255);"
    >
      <span
        aria-label="ant-design"
@ -445,30 +445,30 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="color:#f56a00;background-color:#fde3cf"
+      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        +2
      </span>
    </span>
    <div>
      <div
-        class="ant-popover ant-avatar-group-popover"
-        style="opacity:0"
+        class="ant-popover ant-avatar-group-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
+        style="opacity: 0;"
      >
        <div
          class="ant-popover-content"
@ -489,7 +489,7 @@ Array [
            >
              <span
                class="ant-avatar ant-avatar-circle ant-avatar-icon"
-                style="background-color:#87d068"
+                style="background-color: rgb(135, 208, 104);"
              >
                <span
                  aria-label="user"
@ -513,8 +513,8 @@ Array [
              </span>
              <div>
                <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                  style="opacity: 0;"
                >
                  <div
                    class="ant-tooltip-content"
@ -537,7 +537,7 @@ Array [
              </div>
              <span
                class="ant-avatar ant-avatar-circle ant-avatar-icon"
-                style="background-color:#1890ff"
+                style="background-color: rgb(24, 144, 255);"
              >
                <span
                  aria-label="ant-design"
@ -581,30 +581,30 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color:#f56a00;background-color:#fde3cf"
+      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        +2
      </span>
    </span>
    <div>
      <div
-        class="ant-popover ant-avatar-group-popover"
-        style="opacity:0"
+        class="ant-popover ant-avatar-group-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
+        style="opacity: 0;"
      >
        <div
          class="ant-popover-content"
@ -625,7 +625,7 @@ Array [
            >
              <span
                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#87d068"
+                style="background-color: rgb(135, 208, 104);"
              >
                <span
                  aria-label="user"
@ -649,8 +649,8 @@ Array [
              </span>
              <div>
                <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                  style="opacity: 0;"
                >
                  <div
                    class="ant-tooltip-content"
@ -673,7 +673,7 @@ Array [
              </div>
              <span
                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#1890ff"
+                style="background-color: rgb(24, 144, 255);"
              >
                <span
                  aria-label="ant-design"
@ -717,30 +717,30 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color:#f56a00;background-color:#fde3cf;cursor:pointer"
+      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207); cursor: pointer;"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        +2
      </span>
    </span>
    <div>
      <div
-        class="ant-popover ant-avatar-group-popover"
-        style="opacity:0"
+        class="ant-popover ant-avatar-group-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
+        style="opacity: 0;"
      >
        <div
          class="ant-popover-content"
@ -761,7 +761,7 @@ Array [
            >
              <span
                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#87d068"
+                style="background-color: rgb(135, 208, 104);"
              >
                <span
                  aria-label="user"
@ -785,8 +785,8 @@ Array [
              </span>
              <div>
                <div
-                  class="ant-tooltip"
-                  style="opacity:0"
+                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                  style="opacity: 0;"
                >
                  <div
                    class="ant-tooltip-content"
@ -809,7 +809,7 @@ Array [
              </div>
              <span
                class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
-                style="background-color:#1890ff"
+                style="background-color: rgb(24, 144, 255);"
              >
                <span
                  aria-label="ant-design"
@ -843,6 +843,7 @@ Array [
 exports[`renders ./components/avatar/demo/responsive.md extend context correctly 1`] = `
 <span
  class="ant-avatar ant-avatar-circle ant-avatar-icon"
+  style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"
 >
  <span
    aria-label="ant-design"
@ -895,44 +896,44 @@ Array [
  <br />,
  <br />,
  <div
-    style="text-align:center;transform:scale(1);margin-top:24px"
+    style="text-align: center; transform: scale(1); margin-top: 24px;"
  >
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background:#7265e6;display:none"
+      style="background: rgb(114, 101, 230); display: none;"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        Avatar
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-      style="background:#00a2ae;display:none"
+      style="background: rgb(0, 162, 174); display: none;"
    >
      <img
        src="invalid"
      />
    </span>
    <div
-      style="display:none"
+      style="display: none;"
    >
      <span
        class="ant-avatar ant-avatar-lg ant-avatar-circle"
-        style="background:#7265e6"
+        style="background: rgb(114, 101, 230);"
      >
        <span
          class="ant-avatar-string"
-          style="opacity:0"
+          style="transform: scale(1) translateX(-50%);"
        >
          Avatar
        </span>
      </span>
      <span
        class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-        style="background:#00a2ae"
+        style="background: rgb(0, 162, 174);"
      >
        <img
          src="invalid"
@ -973,18 +974,18 @@ Array [
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    >
      U
    </span>
  </span>,
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width:40px;height:40px;line-height:40px;font-size:18px"
+    style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="line-height: 40px; transform: scale(1) translateX(-50%);"
    >
      USER
    </span>
@ -1005,7 +1006,7 @@ Array [
      <img
        class="ant-image-img"
        src="https://joeschmoe.io/api/v1/random"
-        style="width:32px"
+        style="width: 32px;"
      />
      <div
        class="ant-image-mask"
@ -1039,18 +1040,18 @@ Array [
  </span>,
  <span
    class="ant-avatar ant-avatar-circle"
-    style="color:#f56a00;background-color:#fde3cf"
+    style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    >
      U
    </span>
  </span>,
  <span
    class="ant-avatar ant-avatar-circle ant-avatar-icon"
-    style="background-color:#87d068"
+    style="background-color: rgb(135, 208, 104);"
  >
    <span
      aria-label="user"
--- a/components/avatar/tests/snapshots/demo.test.ts.snap
+++ b/components/avatar/tests/snapshots/demo.test.ts.snap
@ -38,7 +38,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -90,7 +90,7 @@ Array [
  <div>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="width:64px;height:64px;line-height:64px;font-size:32px"
+      style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
    >
      <span
        aria-label="user"
@ -185,7 +185,7 @@ Array [
  <div>
    <span
      class="ant-avatar ant-avatar-square ant-avatar-icon"
-      style="width:64px;height:64px;line-height:64px;font-size:32px"
+      style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
    >
      <span
        aria-label="user"
@ -284,18 +284,18 @@ exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
 Array [
  <span
    class="ant-avatar ant-avatar-lg ant-avatar-circle"
-    style="background-color:#f56a00;vertical-align:middle"
+    style="background-color: rgb(245, 106, 0); vertical-align: middle;"
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    >
      U
    </span>
  </span>,
  <button
    class="ant-btn ant-btn-default ant-btn-sm"
-    style="margin:0 16px;vertical-align:middle"
+    style="margin: 0px 16px; vertical-align: middle;"
    type="button"
  >
    <span>
@ -304,7 +304,7 @@ Array [
  </button>,
  <button
    class="ant-btn ant-btn-default ant-btn-sm"
-    style="vertical-align:middle"
+    style="vertical-align: middle;"
    type="button"
  >
    <span>
@ -347,18 +347,18 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="background-color:#87d068"
+      style="background-color: rgb(135, 208, 104);"
    >
      <span
        aria-label="user"
@ -382,7 +382,7 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="background-color:#1890ff"
+      style="background-color: rgb(24, 144, 255);"
    >
      <span
        aria-label="ant-design"
@ -421,22 +421,22 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="color:#f56a00;background-color:#fde3cf"
+      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        +2
      </span>
@ -458,22 +458,22 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color:#f56a00;background-color:#fde3cf"
+      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        +2
      </span>
@ -495,22 +495,22 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color:#f56a00"
+      style="background-color: rgb(245, 106, 0);"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color:#f56a00;background-color:#fde3cf;cursor:pointer"
+      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207); cursor: pointer;"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        +2
      </span>
@ -522,6 +522,7 @@ Array [
 exports[`renders ./components/avatar/demo/responsive.md correctly 1`] = `
 <span
  class="ant-avatar ant-avatar-circle ant-avatar-icon"
+  style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"
 >
  <span
    aria-label="ant-design"
@ -574,44 +575,44 @@ Array [
  <br />,
  <br />,
  <div
-    style="text-align:center;transform:scale(1);margin-top:24px"
+    style="text-align: center; transform: scale(1); margin-top: 24px;"
  >
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background:#7265e6;display:none"
+      style="background: rgb(114, 101, 230); display: none;"
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      >
        Avatar
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-      style="background:#00a2ae;display:none"
+      style="background: rgb(0, 162, 174); display: none;"
    >
      <img
        src="invalid"
      />
    </span>
    <div
-      style="display:none"
+      style="display: none;"
    >
      <span
        class="ant-avatar ant-avatar-lg ant-avatar-circle"
-        style="background:#7265e6"
+        style="background: rgb(114, 101, 230);"
      >
        <span
          class="ant-avatar-string"
-          style="opacity:0"
+          style="transform: scale(1) translateX(-50%);"
        >
          Avatar
        </span>
      </span>
      <span
        class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-        style="background:#00a2ae"
+        style="background: rgb(0, 162, 174);"
      >
        <img
          src="invalid"
@ -652,18 +653,18 @@ Array [
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    >
      U
    </span>
  </span>,
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width:40px;height:40px;line-height:40px;font-size:18px"
+    style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="line-height: 40px; transform: scale(1) translateX(-50%);"
    >
      USER
    </span>
@ -684,7 +685,7 @@ Array [
      <img
        class="ant-image-img"
        src="https://joeschmoe.io/api/v1/random"
-        style="width:32px"
+        style="width: 32px;"
      />
      <div
        class="ant-image-mask"
@ -718,18 +719,18 @@ Array [
  </span>,
  <span
    class="ant-avatar ant-avatar-circle"
-    style="color:#f56a00;background-color:#fde3cf"
+    style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    >
      U
    </span>
  </span>,
  <span
    class="ant-avatar ant-avatar-circle ant-avatar-icon"
-    style="background-color:#87d068"
+    style="background-color: rgb(135, 208, 104);"
  >
    <span
      aria-label="user"
--- a/components/back-top/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/back-top/tests/snapshots/demo-extend.test.ts.snap
@ -5,19 +5,17 @@ Array [
  <div
    class="ant-back-top"
  />,
-  "Scroll down to see the bottom-right",
  <strong
    class="site-back-top-basic"
  >
     gray 
  </strong>,
-  "button.",
 ]
 `;

 exports[`renders ./components/back-top/demo/custom.md extend context correctly 1`] = `
 <div
-  style="height:600vh;padding:8px"
+  style="height: 600vh; padding: 8px;"
 >
  <div>
    Scroll to bottom
--- a/components/back-top/tests/snapshots/demo.test.ts.snap
+++ b/components/back-top/tests/snapshots/demo.test.ts.snap
@ -5,19 +5,17 @@ Array [
  <div
    class="ant-back-top"
  />,
-  "Scroll down to see the bottom-right",
  <strong
    class="site-back-top-basic"
  >
     gray 
  </strong>,
-  "button.",
 ]
 `;

 exports[`renders ./components/back-top/demo/custom.md correctly 1`] = `
 <div
-  style="height:600vh;padding:8px"
+  style="height: 600vh; padding: 8px;"
 >
  <div>
    Scroll to bottom
--- a/components/badge/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/badge/tests/snapshots/demo-extend.test.ts.snap
@ -10,7 +10,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -20,7 +20,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -38,7 +38,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -57,14 +57,14 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <span
      aria-label="clock-circle"
      class="anticon anticon-clock-circle ant-scroll-number-custom-component"
      role="img"
-      style="color:#f5222d"
+      style="color: rgb(245, 34, 45);"
    >
      <svg
        aria-hidden="true"
@ -97,7 +97,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -107,7 +107,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -162,7 +162,9 @@ Array [
          viewBox="64 64 896 896"
          width="1em"
        >
-          <defs />
+          <defs>
+            <style />
+          </defs>
          <path
            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
          />
@ -209,7 +211,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -444,7 +446,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#f50"
+      style="background: rgb(255, 85, 0);"
    />
    <span
      class="ant-badge-status-text"
@ -458,7 +460,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#2db7f5"
+      style="background: rgb(45, 183, 245);"
    />
    <span
      class="ant-badge-status-text"
@ -472,7 +474,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#87d068"
+      style="background: rgb(135, 208, 104);"
    />
    <span
      class="ant-badge-status-text"
@ -486,7 +488,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#108ee9"
+      style="background: rgb(16, 142, 233);"
    />
    <span
      class="ant-badge-status-text"
@ -500,13 +502,13 @@ Array [
 exports[`renders ./components/badge/demo/colorful-with-count-debug.md extend context correctly 1`] = `
 Array [
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        pink
      </div>
@ -517,7 +519,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -527,7 +529,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -539,13 +541,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        red
      </div>
@ -556,7 +558,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -566,7 +568,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -578,13 +580,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        yellow
      </div>
@ -595,7 +597,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -605,7 +607,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -617,13 +619,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        orange
      </div>
@ -634,7 +636,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -644,7 +646,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -656,13 +658,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        cyan
      </div>
@ -673,7 +675,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -683,7 +685,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -695,13 +697,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        green
      </div>
@ -712,7 +714,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -722,7 +724,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -734,13 +736,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        blue
      </div>
@ -751,7 +753,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -761,7 +763,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -773,13 +775,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        purple
      </div>
@ -790,7 +792,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -800,7 +802,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -812,13 +814,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        geekblue
      </div>
@ -829,7 +831,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -839,7 +841,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -851,13 +853,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        magenta
      </div>
@ -868,7 +870,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -878,7 +880,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -890,13 +892,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        volcano
      </div>
@ -907,7 +909,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -917,7 +919,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -929,13 +931,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        gold
      </div>
@ -946,7 +948,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -956,7 +958,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -968,13 +970,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        lime
      </div>
@ -985,7 +987,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -995,7 +997,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -1018,7 +1020,7 @@ Array [
      aria-label="notification"
      class="anticon anticon-notification"
      role="img"
-      style="font-size:16px"
+      style="font-size: 16px;"
    >
      <svg
        aria-hidden="true"
@ -1067,7 +1069,7 @@ exports[`renders ./components/badge/demo/link.md extend context correctly 1`] =
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1077,7 +1079,7 @@ exports[`renders ./components/badge/demo/link.md extend context correctly 1`] =
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1100,7 +1102,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1110,7 +1112,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1128,7 +1130,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1138,7 +1140,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1156,7 +1158,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1166,7 +1168,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1184,18 +1186,18 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
      class="ant-scroll-number ant-badge-count"
      data-show="true"
-      style="background:#fa541c"
+      style="background: rgb(250, 84, 28);"
      title="5"
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1213,7 +1215,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1229,7 +1231,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1245,7 +1247,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1261,13 +1263,13 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
      class="ant-scroll-number ant-badge-dot"
      data-show="true"
-      style="background:#fa541c"
+      style="background: rgb(250, 84, 28);"
    />
  </span>,
 ]
@ -1279,7 +1281,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <button
      aria-checked="true"
@ -1297,7 +1299,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="ant-badge ant-badge-not-a-wrapper"
@ -1309,7 +1311,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -1319,7 +1321,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -1332,7 +1334,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="ant-badge ant-badge-not-a-wrapper"
@ -1341,7 +1343,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
        aria-label="clock-circle"
        class="anticon anticon-clock-circle ant-scroll-number-custom-component"
        role="img"
-        style="color:#f5222d"
+        style="color: rgb(245, 34, 45);"
      >
        <svg
          aria-hidden="true"
@ -1371,7 +1373,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md extend context correctly
      <sup
        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
        data-show="true"
-        style="background-color:#52c41a"
+        style="background-color: rgb(82, 196, 26);"
        title="109"
      >
        99+
@ -1390,18 +1392,18 @@ exports[`renders ./components/badge/demo/offset.md extend context correctly 1`]
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    />
  </span>
  <sup
    class="ant-scroll-number ant-badge-count"
    data-show="true"
-    style="margin-top:10px;right:-10px"
+    style="margin-top: 10px; right: -10px;"
    title="5"
  >
    <span
      class="ant-scroll-number-only"
-      style="transition:none"
+      style="transition: none;"
    >
      <span
        class="ant-scroll-number-only-unit current"
@ -1423,7 +1425,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1433,7 +1435,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1443,7 +1445,7 @@ Array [
      </span>
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1461,7 +1463,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1480,7 +1482,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1499,7 +1501,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1825,11 +1827,11 @@ Array [
 exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1859,7 +1861,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1889,7 +1891,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1905,7 +1907,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
      </div>
      <div
        class="ant-ribbon ant-ribbon-placement-end"
-        style="background:#2db7f5"
+        style="background: rgb(45, 183, 245);"
      >
        <span
          class="ant-ribbon-text"
@ -1914,14 +1916,14 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
        </span>
        <div
          class="ant-ribbon-corner"
-          style="color:#2db7f5"
+          style="color: rgb(45, 183, 245);"
        />
      </div>
    </div>
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1937,7 +1939,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
      </div>
      <div
        class="ant-ribbon ant-ribbon-placement-start"
-        style="background:#2db7f5"
+        style="background: rgb(45, 183, 245);"
      >
        <span
          class="ant-ribbon-text"
@ -1946,7 +1948,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
        </span>
        <div
          class="ant-ribbon-corner"
-          style="color:#2db7f5"
+          style="color: rgb(45, 183, 245);"
        />
      </div>
    </div>
@ -1968,7 +1970,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
      </div>
      <div
        class="ant-ribbon ant-ribbon-placement-end"
-        style="background:#2db7f5"
+        style="background: rgb(45, 183, 245);"
      >
        <span
          class="ant-ribbon-text"
@ -1977,7 +1979,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md extend context correctl
        </span>
        <div
          class="ant-ribbon-corner"
-          style="color:#2db7f5"
+          style="color: rgb(45, 183, 245);"
        />
      </div>
    </div>
@ -1995,7 +1997,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2005,7 +2007,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2023,7 +2025,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2033,7 +2035,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2176,7 +2178,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2186,7 +2188,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2204,7 +2206,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2214,7 +2216,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2224,7 +2226,7 @@ Array [
      </span>
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
--- a/components/badge/tests/snapshots/demo.test.ts.snap
+++ b/components/badge/tests/snapshots/demo.test.ts.snap
@ -10,7 +10,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -20,7 +20,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -38,7 +38,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -57,14 +57,14 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <span
      aria-label="clock-circle"
      class="anticon anticon-clock-circle ant-scroll-number-custom-component"
      role="img"
-      style="color:#f5222d"
+      style="color: rgb(245, 34, 45);"
    >
      <svg
        aria-hidden="true"
@ -97,7 +97,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -107,7 +107,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -162,7 +162,9 @@ Array [
          viewBox="64 64 896 896"
          width="1em"
        >
-          <defs />
+          <defs>
+            <style />
+          </defs>
          <path
            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
          />
@ -209,7 +211,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -444,7 +446,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#f50"
+      style="background: rgb(255, 85, 0);"
    />
    <span
      class="ant-badge-status-text"
@ -458,7 +460,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#2db7f5"
+      style="background: rgb(45, 183, 245);"
    />
    <span
      class="ant-badge-status-text"
@ -472,7 +474,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#87d068"
+      style="background: rgb(135, 208, 104);"
    />
    <span
      class="ant-badge-status-text"
@ -486,7 +488,7 @@ Array [
  >
    <span
      class="ant-badge-status-dot"
-      style="background:#108ee9"
+      style="background: rgb(16, 142, 233);"
    />
    <span
      class="ant-badge-status-text"
@ -500,13 +502,13 @@ Array [
 exports[`renders ./components/badge/demo/colorful-with-count-debug.md correctly 1`] = `
 Array [
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        pink
      </div>
@ -517,7 +519,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -527,7 +529,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -539,13 +541,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        red
      </div>
@ -556,7 +558,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -566,7 +568,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -578,13 +580,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        yellow
      </div>
@ -595,7 +597,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -605,7 +607,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -617,13 +619,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        orange
      </div>
@ -634,7 +636,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -644,7 +646,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -656,13 +658,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        cyan
      </div>
@ -673,7 +675,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -683,7 +685,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -695,13 +697,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        green
      </div>
@ -712,7 +714,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -722,7 +724,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -734,13 +736,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        blue
      </div>
@ -751,7 +753,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -761,7 +763,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -773,13 +775,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        purple
      </div>
@ -790,7 +792,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -800,7 +802,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -812,13 +814,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        geekblue
      </div>
@ -829,7 +831,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -839,7 +841,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -851,13 +853,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        magenta
      </div>
@ -868,7 +870,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -878,7 +880,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -890,13 +892,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        volcano
      </div>
@ -907,7 +909,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -917,7 +919,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -929,13 +931,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        gold
      </div>
@ -946,7 +948,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -956,7 +958,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -968,13 +970,13 @@ Array [
    </span>
  </div>,
  <div
-    style="display:inline-block;vertical-align:middle"
+    style="display: inline-block; vertical-align: middle;"
  >
    <span
      class="ant-badge"
    >
      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center;margin-bottom:10px"
+        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center; margin-bottom: 10px;"
      >
        lime
      </div>
@ -985,7 +987,7 @@ Array [
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -995,7 +997,7 @@ Array [
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -1018,7 +1020,7 @@ Array [
      aria-label="notification"
      class="anticon anticon-notification"
      role="img"
-      style="font-size:16px"
+      style="font-size: 16px;"
    >
      <svg
        aria-hidden="true"
@ -1067,7 +1069,7 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1077,7 +1079,7 @@ exports[`renders ./components/badge/demo/link.md correctly 1`] = `
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1100,7 +1102,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1110,7 +1112,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1128,7 +1130,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1138,7 +1140,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1156,7 +1158,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1166,7 +1168,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1184,18 +1186,18 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
      class="ant-scroll-number ant-badge-count"
      data-show="true"
-      style="background:#fa541c"
+      style="background: rgb(250, 84, 28);"
      title="5"
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1213,7 +1215,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1229,7 +1231,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1245,7 +1247,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1261,13 +1263,13 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
      class="ant-scroll-number ant-badge-dot"
      data-show="true"
-      style="background:#fa541c"
+      style="background: rgb(250, 84, 28);"
    />
  </span>,
 ]
@ -1279,7 +1281,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <button
      aria-checked="true"
@ -1297,7 +1299,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="ant-badge ant-badge-not-a-wrapper"
@ -1309,7 +1311,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
      >
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -1319,7 +1321,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
        </span>
        <span
          class="ant-scroll-number-only"
-          style="transition:none"
+          style="transition: none;"
        >
          <span
            class="ant-scroll-number-only-unit current"
@ -1332,7 +1334,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="ant-badge ant-badge-not-a-wrapper"
@ -1341,7 +1343,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
        aria-label="clock-circle"
        class="anticon anticon-clock-circle ant-scroll-number-custom-component"
        role="img"
-        style="color:#f5222d"
+        style="color: rgb(245, 34, 45);"
      >
        <svg
          aria-hidden="true"
@ -1371,7 +1373,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
      <sup
        class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
        data-show="true"
-        style="background-color:#52c41a"
+        style="background-color: rgb(82, 196, 26);"
        title="109"
      >
        99+
@ -1390,18 +1392,18 @@ exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
  >
    <span
      class="ant-avatar-string"
-      style="opacity:0"
+      style="transform: scale(1) translateX(-50%);"
    />
  </span>
  <sup
    class="ant-scroll-number ant-badge-count"
    data-show="true"
-    style="margin-top:10px;right:-10px"
+    style="margin-top: 10px; right: -10px;"
    title="5"
  >
    <span
      class="ant-scroll-number-only"
-      style="transition:none"
+      style="transition: none;"
    >
      <span
        class="ant-scroll-number-only-unit current"
@ -1423,7 +1425,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1433,7 +1435,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1443,7 +1445,7 @@ Array [
      </span>
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -1461,7 +1463,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1480,7 +1482,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1499,7 +1501,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -1825,11 +1827,11 @@ Array [
 exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1859,7 +1861,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1889,7 +1891,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1905,7 +1907,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
      </div>
      <div
        class="ant-ribbon ant-ribbon-placement-end"
-        style="background:#2db7f5"
+        style="background: rgb(45, 183, 245);"
      >
        <span
          class="ant-ribbon-text"
@ -1914,14 +1916,14 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
        </span>
        <div
          class="ant-ribbon-corner"
-          style="color:#2db7f5"
+          style="color: rgb(45, 183, 245);"
        />
      </div>
    </div>
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-ribbon-wrapper"
@ -1937,7 +1939,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
      </div>
      <div
        class="ant-ribbon ant-ribbon-placement-start"
-        style="background:#2db7f5"
+        style="background: rgb(45, 183, 245);"
      >
        <span
          class="ant-ribbon-text"
@ -1946,7 +1948,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
        </span>
        <div
          class="ant-ribbon-corner"
-          style="color:#2db7f5"
+          style="color: rgb(45, 183, 245);"
        />
      </div>
    </div>
@ -1968,7 +1970,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
      </div>
      <div
        class="ant-ribbon ant-ribbon-placement-end"
-        style="background:#2db7f5"
+        style="background: rgb(45, 183, 245);"
      >
        <span
          class="ant-ribbon-text"
@ -1977,7 +1979,7 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
        </span>
        <div
          class="ant-ribbon-corner"
-          style="color:#2db7f5"
+          style="color: rgb(45, 183, 245);"
        />
      </div>
    </div>
@ -1995,7 +1997,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2005,7 +2007,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2023,7 +2025,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2033,7 +2035,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2176,7 +2178,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2186,7 +2188,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2204,7 +2206,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="opacity:0"
+        style="transform: scale(1) translateX(-50%);"
      />
    </span>
    <sup
@ -2214,7 +2216,7 @@ Array [
    >
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
@ -2224,7 +2226,7 @@ Array [
      </span>
      <span
        class="ant-scroll-number-only"
-        style="transition:none"
+        style="transition: none;"
      >
        <span
          class="ant-scroll-number-only-unit current"
--- a/components/breadcrumb/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/breadcrumb/tests/snapshots/demo-extend.test.ts.snap
@ -133,8 +133,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
      </span>
      <div>
        <div
-          class="ant-dropdown"
-          style="opacity:0"
+          class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
        >
          <ul
            class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -144,6 +144,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
          >
            <li
              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-1"
              role="menuitem"
              tabindex="-1"
            >
@ -161,8 +162,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </li>
            <div>
              <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                style="opacity: 0;"
              >
                <div
                  class="ant-tooltip-content"
@ -183,6 +184,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </div>
            <li
              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-2"
              role="menuitem"
              tabindex="-1"
            >
@ -200,8 +202,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </li>
            <div>
              <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                style="opacity: 0;"
              >
                <div
                  class="ant-tooltip-content"
@ -222,6 +224,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </div>
            <li
              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-3"
              role="menuitem"
              tabindex="-1"
            >
@ -239,8 +242,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </li>
            <div>
              <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                style="opacity: 0;"
              >
                <div
                  class="ant-tooltip-content"
@ -262,12 +265,12 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
          </ul>
          <div
            aria-hidden="true"
-            style="display:none"
+            style="display: none;"
          >
            <div>
              <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                style="opacity: 0;"
              >
                <div
                  class="ant-tooltip-content"
@ -288,8 +291,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </div>
            <div>
              <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                style="opacity: 0;"
              >
                <div
                  class="ant-tooltip-content"
@ -310,8 +313,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </div>
            <div>
              <div
-                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                style="opacity:0"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                style="opacity: 0;"
              >
                <div
                  class="ant-tooltip-content"
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@ -91,10 +91,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -122,10 +123,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -151,10 +153,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -182,10 +185,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -240,10 +244,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -549,8 +554,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -632,8 +637,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -708,8 +713,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -783,8 +788,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -884,8 +889,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -967,8 +972,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -1043,8 +1048,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -1118,8 +1123,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip"
-      style="opacity:0"
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+      style="opacity: 0;"
    >
      <div
        class="ant-tooltip-content"
@ -1218,12 +1223,12 @@ Array [
      </button>
      <span
        class="ant-tooltip-disabled-compatible-wrapper"
-        style="display:inline-block;cursor:not-allowed"
+        style="display: inline-block; cursor: not-allowed;"
      >
        <button
          class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
          disabled=""
-          style="pointer-events:none"
+          style="pointer-events: none;"
          type="button"
        >
          <span
@ -1249,8 +1254,8 @@ Array [
      </span>
      <div>
        <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1297,8 +1302,8 @@ Array [
      </button>
      <div>
        <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1344,12 +1349,12 @@ Array [
      </button>
      <span
        class="ant-tooltip-disabled-compatible-wrapper"
-        style="display:inline-block;cursor:not-allowed"
+        style="display: inline-block; cursor: not-allowed;"
      >
        <button
          class="ant-btn ant-btn-primary ant-btn-icon-only"
          disabled=""
-          style="pointer-events:none"
+          style="pointer-events: none;"
          type="button"
        >
          <span
@ -1375,8 +1380,8 @@ Array [
      </span>
      <div>
        <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1423,8 +1428,8 @@ Array [
      </button>
      <div>
        <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1470,12 +1475,12 @@ Array [
      </button>
      <span
        class="ant-tooltip-disabled-compatible-wrapper"
-        style="display:inline-block;cursor:not-allowed"
+        style="display: inline-block; cursor: not-allowed;"
      >
        <button
          class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"
          disabled=""
-          style="pointer-events:none"
+          style="pointer-events: none;"
          type="button"
        >
          <span
@ -1501,8 +1506,8 @@ Array [
      </span>
      <div>
        <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1549,8 +1554,8 @@ Array [
      </button>
      <div>
        <div
-          class="ant-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1580,11 +1585,11 @@ exports[`renders ./components/button/demo/loading.md extend context correctly 1`
 Array [
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary ant-btn-loading"
@ -1592,10 +1597,11 @@ Array [
      >
        <span
          class="ant-btn-loading-icon"
+          style="width: 0px; opacity: 0; transform: scale(0);"
        >
          <span
            aria-label="loading"
-            class="anticon anticon-loading anticon-spin"
+            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
            role="img"
          >
            <svg
@ -1620,7 +1626,7 @@ Array [
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
@ -1628,10 +1634,11 @@ Array [
      >
        <span
          class="ant-btn-loading-icon"
+          style="width: 0px; opacity: 0; transform: scale(0);"
        >
          <span
            aria-label="loading"
-            class="anticon anticon-loading anticon-spin"
+            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
            role="img"
          >
            <svg
@ -1689,11 +1696,11 @@ Array [
  </div>,
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary"
@ -1706,7 +1713,7 @@ Array [
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary"
@ -1823,8 +1830,8 @@ Array [
    </button>
    <div>
      <div
-        class="ant-dropdown"
-        style="opacity:0"
+        class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0;"
      >
        <ul
          class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -1834,6 +1841,7 @@ Array [
        >
          <li
            class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-1"
            role="menuitem"
            tabindex="-1"
          >
@ -1845,8 +1853,8 @@ Array [
          </li>
          <div>
            <div
-              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -1867,6 +1875,7 @@ Array [
          </div>
          <li
            class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-2"
            role="menuitem"
            tabindex="-1"
          >
@ -1878,8 +1887,8 @@ Array [
          </li>
          <div>
            <div
-              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -1900,6 +1909,7 @@ Array [
          </div>
          <li
            class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-3"
            role="menuitem"
            tabindex="-1"
          >
@ -1911,8 +1921,8 @@ Array [
          </li>
          <div>
            <div
-              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -1934,12 +1944,12 @@ Array [
        </ul>
        <div
          aria-hidden="true"
-          style="display:none"
+          style="display: none;"
        >
          <div>
            <div
-              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -1960,8 +1970,8 @@ Array [
          </div>
          <div>
            <div
-              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -1982,8 +1992,8 @@ Array [
          </div>
          <div>
            <div
-              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@ -91,10 +91,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -122,10 +123,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -151,10 +153,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -182,10 +185,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -240,10 +244,11 @@ Array [
  >
    <span
      class="ant-btn-loading-icon"
+      style="width: 0px; opacity: 0; transform: scale(0);"
    >
      <span
        aria-label="loading"
-        class="anticon anticon-loading anticon-spin"
+        class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
        role="img"
      >
        <svg
@ -1026,12 +1031,12 @@ Array [
      </button>
      <span
        class="ant-tooltip-disabled-compatible-wrapper"
-        style="display:inline-block;cursor:not-allowed"
+        style="display: inline-block; cursor: not-allowed;"
      >
        <button
          class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
          disabled=""
-          style="pointer-events:none"
+          style="pointer-events: none;"
          type="button"
        >
          <span
@ -1104,12 +1109,12 @@ Array [
      </button>
      <span
        class="ant-tooltip-disabled-compatible-wrapper"
-        style="display:inline-block;cursor:not-allowed"
+        style="display: inline-block; cursor: not-allowed;"
      >
        <button
          class="ant-btn ant-btn-primary ant-btn-icon-only"
          disabled=""
-          style="pointer-events:none"
+          style="pointer-events: none;"
          type="button"
        >
          <span
@ -1182,12 +1187,12 @@ Array [
      </button>
      <span
        class="ant-tooltip-disabled-compatible-wrapper"
-        style="display:inline-block;cursor:not-allowed"
+        style="display: inline-block; cursor: not-allowed;"
      >
        <button
          class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"
          disabled=""
-          style="pointer-events:none"
+          style="pointer-events: none;"
          type="button"
        >
          <span
@ -1244,11 +1249,11 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
 Array [
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary ant-btn-loading"
@ -1256,10 +1261,11 @@ Array [
      >
        <span
          class="ant-btn-loading-icon"
+          style="width: 0px; opacity: 0; transform: scale(0);"
        >
          <span
            aria-label="loading"
-            class="anticon anticon-loading anticon-spin"
+            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
            role="img"
          >
            <svg
@ -1284,7 +1290,7 @@ Array [
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
@ -1292,10 +1298,11 @@ Array [
      >
        <span
          class="ant-btn-loading-icon"
+          style="width: 0px; opacity: 0; transform: scale(0);"
        >
          <span
            aria-label="loading"
-            class="anticon anticon-loading anticon-spin"
+            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
            role="img"
          >
            <svg
@ -1353,11 +1360,11 @@ Array [
  </div>,
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary"
@ -1370,7 +1377,7 @@ Array [
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <button
        class="ant-btn ant-btn-primary"
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@ -29,7 +29,7 @@ function isReactFragment(node: React.ReactNode) {
 }

 // Insert one space between two chinese characters automatically.
-function insertSpace(child: React.ReactChild, needInserted: boolean) {
+function insertSpace(child: React.ReactElement | string | number, needInserted: boolean) {
  // Check the child if is undefined or null.
  if (child === null || child === undefined) {
    return;
@ -74,7 +74,7 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {

  // Pass to React.Children.map to auto fill key
  return React.Children.map(childList, child =>
-    insertSpace(child as React.ReactChild, needInserted),
+    insertSpace(child as React.ReactElement | string | number, needInserted),
  );
 }

--- a/components/calendar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo-extend.test.ts.snap
--- a/components/calendar/tests/snapshots/demo.test.js.snap
+++ b/components/calendar/tests/snapshots/demo.test.js.snap
@ -17,16 +17,17 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -42,7 +43,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -76,16 +77,17 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -101,7 +103,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -962,16 +964,17 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="undefined_list_0"
+              aria-activedescendant="rc_select_test_list_test"
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -987,7 +990,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select:none;-webkit-user-select:none"
+          style="user-select: none;"
          unselectable="on"
        >
          <span
@ -1021,16 +1024,17 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="undefined_list_0"
+              aria-activedescendant="rc_select_test_list_test"
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -1046,7 +1050,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select:none;-webkit-user-select:none"
+          style="user-select: none;"
          unselectable="on"
        >
          <span
@ -1896,7 +1900,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
    class="ant-picker-calendar ant-picker-calendar-mini"
  >
    <div
-      style="padding:8px"
+      style="padding: 8px;"
    >
      <h4
        class="ant-typography"
@ -1905,11 +1909,11 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
      </h4>
      <div
        class="ant-row"
-        style="margin-left:-4px;margin-right:-4px"
+        style="margin-left: -4px; margin-right: -4px;"
      >
        <div
          class="ant-col"
-          style="padding-left:4px;padding-right:4px"
+          style="padding-left: 4px; padding-right: 4px;"
        >
          <div
            class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
@ -1957,7 +1961,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
        </div>
        <div
          class="ant-col"
-          style="padding-left:4px;padding-right:4px"
+          style="padding-left: 4px; padding-right: 4px;"
        >
          <div
            class="ant-select ant-select-sm my-year-select ant-select-single ant-select-show-arrow"
@ -1969,16 +1973,17 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="undefined_list_0"
+                  aria-activedescendant="rc_select_test_list_test"
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -1994,7 +1999,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -2021,7 +2026,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
        </div>
        <div
          class="ant-col"
-          style="padding-left:4px;padding-right:4px"
+          style="padding-left: 4px; padding-right: 4px;"
        >
          <div
            class="ant-select ant-select-sm ant-select-single ant-select-show-arrow"
@ -2033,16 +2038,17 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="undefined_list_0"
+                  aria-activedescendant="rc_select_test_list_test"
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -2058,7 +2064,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -2876,16 +2882,17 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -2901,7 +2908,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -2935,16 +2942,17 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -2960,7 +2968,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -4231,16 +4239,17 @@ Array [
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="undefined_list_0"
+              aria-activedescendant="rc_select_test_list_test"
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -4256,7 +4265,7 @@ Array [
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select:none;-webkit-user-select:none"
+          style="user-select: none;"
          unselectable="on"
        >
          <span
@ -4290,16 +4299,17 @@ Array [
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="undefined_list_0"
+              aria-activedescendant="rc_select_test_list_test"
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -4315,7 +4325,7 @@ Array [
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select:none;-webkit-user-select:none"
+          style="user-select: none;"
          unselectable="on"
        >
          <span
--- a/components/calendar/tests/index.test.js
+++ b/components/calendar/tests/index.test.js
@ -14,7 +14,7 @@ import Header from '../Header';

 describe('Calendar', () => {
  mountTest(Calendar);
-  rtlTest(Calendar, true);
+  rtlTest(Calendar, { mockDate: true });

  function openSelect(wrapper, className) {
    wrapper.find(className).find('.ant-select-selector').simulate('mousedown');
--- a/components/calendar/tests/index.test.tsx
+++ b/components/calendar/tests/index.test.tsx
@ -15,7 +15,7 @@ import Header from '../Header';

 describe('Calendar', () => {
  mountTest(Calendar);
-  rtlTest(Calendar, true);
+  rtlTest(Calendar, { mockDate: true });

  function openSelect(wrapper: HTMLElement, className: string) {
    fireEvent.mouseDown(wrapper.querySelector(className)!.querySelector('.ant-select-selector')!);
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@ -118,11 +118,12 @@ const Card = React.forwardRef((props: CardProps, ref: React.Ref<HTMLDivElement>)
        {...extraProps}
        className={`${prefixCls}-head-tabs`}
        onChange={onTabChange}
-      >
-        {tabList.map(item => (
-          <Tabs.TabPane tab={item.tab} disabled={item.disabled} key={item.key} />
-        ))}
-      </Tabs>
+        items={tabList.map(item => ({
+          label: item.tab,
+          key: item.key,
+          disabled: item.disabled ?? false,
+        }))}
+      />
    ) : null;
  if (title || extra || tabs) {
    head = (
--- a/components/card/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/card/tests/snapshots/demo-extend.test.ts.snap
@ -4,7 +4,7 @@ exports[`renders ./components/card/demo/basic.md extend context correctly 1`] =
 Array [
  <div
    class="ant-card ant-card-bordered"
-    style="width:300px"
+    style="width: 300px;"
  >
    <div
      class="ant-card-head"
@ -44,7 +44,7 @@ Array [
  </div>,
  <div
    class="ant-card ant-card-bordered ant-card-small"
-    style="width:300px"
+    style="width: 300px;"
  >
    <div
      class="ant-card-head"
@ -91,7 +91,7 @@ exports[`renders ./components/card/demo/border-less.md extend context correctly
 >
  <div
    class="ant-card"
-    style="width:300px"
+    style="width: 300px;"
  >
    <div
      class="ant-card-head"
@ -126,7 +126,7 @@ exports[`renders ./components/card/demo/border-less.md extend context correctly
 exports[`renders ./components/card/demo/flexible-content.md extend context correctly 1`] = `
 <div
  class="ant-card ant-card-bordered ant-card-hoverable"
-  style="width:240px"
+  style="width: 240px;"
 >
  <div
    class="ant-card-cover"
@ -183,43 +183,43 @@ exports[`renders ./components/card/demo/grid-card.md extend context correctly 1`
  >
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
@ -233,11 +233,11 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
 >
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px"
+    style="margin-left: -8px; margin-right: -8px;"
  >
    <div
      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        class="ant-card"
@ -264,7 +264,7 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
    </div>
    <div
      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        class="ant-card"
@ -291,7 +291,7 @@ exports[`renders ./components/card/demo/in-column.md extend context correctly 1`
    </div>
    <div
      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        class="ant-card"
@ -373,7 +373,7 @@ exports[`renders ./components/card/demo/inner.md extend context correctly 1`] =
    </div>
    <div
      class="ant-card ant-card-bordered ant-card-type-inner"
-      style="margin-top:16px"
+      style="margin-top: 16px;"
    >
      <div
        class="ant-card-head"
@ -424,7 +424,7 @@ Array [
  </button>,
  <div
    class="ant-card ant-card-loading ant-card-bordered"
-    style="width:300px;margin-top:16px"
+    style="width: 300px; margin-top: 16px;"
  >
    <div
      class="ant-card-body"
@ -442,7 +442,7 @@ Array [
            <li />
            <li />
            <li
-              style="width:61%"
+              style="width: 61%;"
            />
          </ul>
        </div>
@ -451,7 +451,7 @@ Array [
  </div>,
  <div
    class="ant-card ant-card-bordered"
-    style="width:300px;margin-top:16px"
+    style="width: 300px; margin-top: 16px;"
  >
    <div
      class="ant-card-body"
@ -471,7 +471,7 @@ Array [
        >
          <h3
            class="ant-skeleton-title"
-            style="width:50%"
+            style="width: 50%;"
          />
          <ul
            class="ant-skeleton-paragraph"
@ -486,7 +486,7 @@ Array [
      class="ant-card-actions"
    >
      <li
-        style="width:33.333333333333336%"
+        style="width: 33.333333333333336%;"
      >
        <span>
          <span
@ -511,7 +511,7 @@ Array [
        </span>
      </li>
      <li
-        style="width:33.333333333333336%"
+        style="width: 33.333333333333336%;"
      >
        <span>
          <span
@ -536,7 +536,7 @@ Array [
        </span>
      </li>
      <li
-        style="width:33.333333333333336%"
+        style="width: 33.333333333333336%;"
      >
        <span>
          <span
@ -568,7 +568,7 @@ Array [
 exports[`renders ./components/card/demo/meta.md extend context correctly 1`] = `
 <div
  class="ant-card ant-card-bordered"
-  style="width:300px"
+  style="width: 300px;"
 >
  <div
    class="ant-card-cover"
@ -615,7 +615,7 @@ exports[`renders ./components/card/demo/meta.md extend context correctly 1`] = `
    class="ant-card-actions"
  >
    <li
-      style="width:33.333333333333336%"
+      style="width: 33.333333333333336%;"
    >
      <span>
        <span
@ -640,7 +640,7 @@ exports[`renders ./components/card/demo/meta.md extend context correctly 1`] = `
      </span>
    </li>
    <li
-      style="width:33.333333333333336%"
+      style="width: 33.333333333333336%;"
    >
      <span>
        <span
@ -665,7 +665,7 @@ exports[`renders ./components/card/demo/meta.md extend context correctly 1`] = `
      </span>
    </li>
    <li
-      style="width:33.333333333333336%"
+      style="width: 33.333333333333336%;"
    >
      <span>
        <span
@ -696,7 +696,7 @@ exports[`renders ./components/card/demo/meta.md extend context correctly 1`] = `
 exports[`renders ./components/card/demo/simple.md extend context correctly 1`] = `
 <div
  class="ant-card ant-card-bordered"
-  style="width:300px"
+  style="width: 300px;"
 >
  <div
    class="ant-card-body"
@ -718,7 +718,7 @@ exports[`renders ./components/card/demo/tabs.md extend context correctly 1`] = `
 Array [
  <div
    class="ant-card ant-card-bordered ant-card-contain-tabs"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-card-head"
@ -753,14 +753,17 @@ Array [
          >
            <div
              class="ant-tabs-nav-list"
-              style="transform:translate(0px, 0px)"
+              style="transform: translate(0px, 0px);"
            >
              <div
                class="ant-tabs-tab ant-tabs-tab-active"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-tabtest"
+                  aria-disabled="false"
                  aria-selected="true"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-tabtest"
                  role="tab"
                  tabindex="0"
                >
@ -771,8 +774,11 @@ Array [
                class="ant-tabs-tab"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-tabtest"
+                  aria-disabled="false"
                  aria-selected="false"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-tabtest"
                  role="tab"
                  tabindex="0"
                >
@ -788,13 +794,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="null-more-popup"
+              aria-controls="rc-tabs-test-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="null-more"
-              style="visibility:hidden;order:1"
+              id="rc-tabs-test-more"
+              style="visibility: hidden; order: 1;"
              tabindex="-1"
              type="button"
            >
@ -820,20 +826,20 @@ Array [
            </button>
            <div>
              <div
-                class="ant-tabs-dropdown"
-                style="opacity:0"
+                class="ant-tabs-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                style="opacity: 0;"
              >
                <ul
                  aria-label="expanded dropdown"
                  class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
                  data-menu-list="true"
-                  id="null-more-popup"
+                  id="rc-tabs-test-more-popup"
                  role="listbox"
                  tabindex="-1"
                />
                <div
                  aria-hidden="true"
-                  style="display:none"
+                  style="display: none;"
                />
              </div>
            </div>
@ -847,7 +853,9 @@ Array [
          >
            <div
              aria-hidden="false"
+              aria-labelledby="rc-tabs-test-tab-tabtest"
              class="ant-tabs-tabpane ant-tabs-tabpane-active"
+              id="rc-tabs-test-panel-tabtest"
              role="tabpanel"
              tabindex="0"
            />
@ -867,7 +875,7 @@ Array [
  <br />,
  <div
    class="ant-card ant-card-bordered ant-card-contain-tabs"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-card-head"
@ -887,14 +895,17 @@ Array [
          >
            <div
              class="ant-tabs-nav-list"
-              style="transform:translate(0px, 0px)"
+              style="transform: translate(0px, 0px);"
            >
              <div
                class="ant-tabs-tab"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-article"
+                  aria-disabled="false"
                  aria-selected="false"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-article"
                  role="tab"
                  tabindex="0"
                >
@ -905,8 +916,11 @@ Array [
                class="ant-tabs-tab ant-tabs-tab-active"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-app"
+                  aria-disabled="false"
                  aria-selected="true"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-app"
                  role="tab"
                  tabindex="0"
                >
@ -917,8 +931,11 @@ Array [
                class="ant-tabs-tab"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-project"
+                  aria-disabled="false"
                  aria-selected="false"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-project"
                  role="tab"
                  tabindex="0"
                >
@ -934,13 +951,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="null-more-popup"
+              aria-controls="rc-tabs-test-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="null-more"
-              style="visibility:hidden;order:1"
+              id="rc-tabs-test-more"
+              style="visibility: hidden; order: 1;"
              tabindex="-1"
              type="button"
            >
@ -966,20 +983,20 @@ Array [
            </button>
            <div>
              <div
-                class="ant-tabs-dropdown"
-                style="opacity:0"
+                class="ant-tabs-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                style="opacity: 0;"
              >
                <ul
                  aria-label="expanded dropdown"
                  class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
                  data-menu-list="true"
-                  id="null-more-popup"
+                  id="rc-tabs-test-more-popup"
                  role="listbox"
                  tabindex="-1"
                />
                <div
                  aria-hidden="true"
-                  style="display:none"
+                  style="display: none;"
                />
              </div>
            </div>
@ -1002,7 +1019,9 @@ Array [
          >
            <div
              aria-hidden="false"
+              aria-labelledby="rc-tabs-test-tab-app"
              class="ant-tabs-tabpane ant-tabs-tabpane-active"
+              id="rc-tabs-test-panel-app"
              role="tabpanel"
              tabindex="0"
            />
--- a/components/card/tests/snapshots/demo.test.ts.snap
+++ b/components/card/tests/snapshots/demo.test.ts.snap
@ -4,7 +4,7 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
 Array [
  <div
    class="ant-card ant-card-bordered"
-    style="width:300px"
+    style="width: 300px;"
  >
    <div
      class="ant-card-head"
@ -44,7 +44,7 @@ Array [
  </div>,
  <div
    class="ant-card ant-card-bordered ant-card-small"
-    style="width:300px"
+    style="width: 300px;"
  >
    <div
      class="ant-card-head"
@ -91,7 +91,7 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 >
  <div
    class="ant-card"
-    style="width:300px"
+    style="width: 300px;"
  >
    <div
      class="ant-card-head"
@ -126,7 +126,7 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = `
 <div
  class="ant-card ant-card-bordered ant-card-hoverable"
-  style="width:240px"
+  style="width: 240px;"
 >
  <div
    class="ant-card-cover"
@ -183,43 +183,43 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
  >
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
    <div
      class="ant-card-grid ant-card-grid-hoverable"
-      style="width:25%;text-align:center"
+      style="width: 25%; text-align: center;"
    >
      Content
    </div>
@ -233,11 +233,11 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
 >
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px"
+    style="margin-left: -8px; margin-right: -8px;"
  >
    <div
      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        class="ant-card"
@ -264,7 +264,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
    </div>
    <div
      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        class="ant-card"
@ -291,7 +291,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
    </div>
    <div
      class="ant-col ant-col-8"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
        class="ant-card"
@ -373,7 +373,7 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
    </div>
    <div
      class="ant-card ant-card-bordered ant-card-type-inner"
-      style="margin-top:16px"
+      style="margin-top: 16px;"
    >
      <div
        class="ant-card-head"
@ -424,7 +424,7 @@ Array [
  </button>,
  <div
    class="ant-card ant-card-loading ant-card-bordered"
-    style="width:300px;margin-top:16px"
+    style="width: 300px; margin-top: 16px;"
  >
    <div
      class="ant-card-body"
@ -442,7 +442,7 @@ Array [
            <li />
            <li />
            <li
-              style="width:61%"
+              style="width: 61%;"
            />
          </ul>
        </div>
@ -451,7 +451,7 @@ Array [
  </div>,
  <div
    class="ant-card ant-card-bordered"
-    style="width:300px;margin-top:16px"
+    style="width: 300px; margin-top: 16px;"
  >
    <div
      class="ant-card-body"
@ -471,7 +471,7 @@ Array [
        >
          <h3
            class="ant-skeleton-title"
-            style="width:50%"
+            style="width: 50%;"
          />
          <ul
            class="ant-skeleton-paragraph"
@ -486,7 +486,7 @@ Array [
      class="ant-card-actions"
    >
      <li
-        style="width:33.333333333333336%"
+        style="width: 33.333333333333336%;"
      >
        <span>
          <span
@ -511,7 +511,7 @@ Array [
        </span>
      </li>
      <li
-        style="width:33.333333333333336%"
+        style="width: 33.333333333333336%;"
      >
        <span>
          <span
@ -536,7 +536,7 @@ Array [
        </span>
      </li>
      <li
-        style="width:33.333333333333336%"
+        style="width: 33.333333333333336%;"
      >
        <span>
          <span
@ -568,7 +568,7 @@ Array [
 exports[`renders ./components/card/demo/meta.md correctly 1`] = `
 <div
  class="ant-card ant-card-bordered"
-  style="width:300px"
+  style="width: 300px;"
 >
  <div
    class="ant-card-cover"
@ -615,7 +615,7 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
    class="ant-card-actions"
  >
    <li
-      style="width:33.333333333333336%"
+      style="width: 33.333333333333336%;"
    >
      <span>
        <span
@ -640,7 +640,7 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
      </span>
    </li>
    <li
-      style="width:33.333333333333336%"
+      style="width: 33.333333333333336%;"
    >
      <span>
        <span
@ -665,7 +665,7 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
      </span>
    </li>
    <li
-      style="width:33.333333333333336%"
+      style="width: 33.333333333333336%;"
    >
      <span>
        <span
@ -696,7 +696,7 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
 exports[`renders ./components/card/demo/simple.md correctly 1`] = `
 <div
  class="ant-card ant-card-bordered"
-  style="width:300px"
+  style="width: 300px;"
 >
  <div
    class="ant-card-body"
@ -718,7 +718,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
 Array [
  <div
    class="ant-card ant-card-bordered ant-card-contain-tabs"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-card-head"
@ -753,14 +753,17 @@ Array [
          >
            <div
              class="ant-tabs-nav-list"
-              style="transform:translate(0px, 0px)"
+              style="transform: translate(0px, 0px);"
            >
              <div
                class="ant-tabs-tab ant-tabs-tab-active"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-tabtest"
+                  aria-disabled="false"
                  aria-selected="true"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-tabtest"
                  role="tab"
                  tabindex="0"
                >
@ -771,8 +774,11 @@ Array [
                class="ant-tabs-tab"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-tabtest"
+                  aria-disabled="false"
                  aria-selected="false"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-tabtest"
                  role="tab"
                  tabindex="0"
                >
@ -788,13 +794,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="null-more-popup"
+              aria-controls="rc-tabs-test-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="null-more"
-              style="visibility:hidden;order:1"
+              id="rc-tabs-test-more"
+              style="visibility: hidden; order: 1;"
              tabindex="-1"
              type="button"
            >
@ -828,7 +834,9 @@ Array [
          >
            <div
              aria-hidden="false"
+              aria-labelledby="rc-tabs-test-tab-tabtest"
              class="ant-tabs-tabpane ant-tabs-tabpane-active"
+              id="rc-tabs-test-panel-tabtest"
              role="tabpanel"
              tabindex="0"
            />
@ -848,7 +856,7 @@ Array [
  <br />,
  <div
    class="ant-card ant-card-bordered ant-card-contain-tabs"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-card-head"
@ -868,14 +876,17 @@ Array [
          >
            <div
              class="ant-tabs-nav-list"
-              style="transform:translate(0px, 0px)"
+              style="transform: translate(0px, 0px);"
            >
              <div
                class="ant-tabs-tab"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-article"
+                  aria-disabled="false"
                  aria-selected="false"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-article"
                  role="tab"
                  tabindex="0"
                >
@ -886,8 +897,11 @@ Array [
                class="ant-tabs-tab ant-tabs-tab-active"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-app"
+                  aria-disabled="false"
                  aria-selected="true"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-app"
                  role="tab"
                  tabindex="0"
                >
@ -898,8 +912,11 @@ Array [
                class="ant-tabs-tab"
              >
                <div
+                  aria-controls="rc-tabs-test-panel-project"
+                  aria-disabled="false"
                  aria-selected="false"
                  class="ant-tabs-tab-btn"
+                  id="rc-tabs-test-tab-project"
                  role="tab"
                  tabindex="0"
                >
@ -915,13 +932,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="null-more-popup"
+              aria-controls="rc-tabs-test-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="null-more"
-              style="visibility:hidden;order:1"
+              id="rc-tabs-test-more"
+              style="visibility: hidden; order: 1;"
              tabindex="-1"
              type="button"
            >
@ -964,7 +981,9 @@ Array [
          >
            <div
              aria-hidden="false"
+              aria-labelledby="rc-tabs-test-tab-app"
              class="ant-tabs-tabpane ant-tabs-tabpane-active"
+              id="rc-tabs-test-panel-app"
              role="tabpanel"
              tabindex="0"
            />
--- a/components/card/tests/demo.test.ts
+++ b/components/card/tests/demo.test.ts
--- a/components/card/tests/index.test.tsx
+++ b/components/card/tests/index.test.tsx
@ -4,6 +4,9 @@ import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
 import Button from '../../button/index';
 import Card from '../index';
+import '@testing-library/jest-dom';
+
+console.log('fireEvent');

 describe('Card', () => {
  mountTest(Card);
--- a/components/carousel/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/carousel/tests/snapshots/demo-extend.test.ts.snap
@ -13,22 +13,22 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
    >
      <div
        class="slick-track"
-        style="width:900%;left:-100%"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -39,16 +39,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -59,16 +59,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -79,16 +79,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -99,16 +99,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -119,16 +119,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -139,16 +139,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -159,16 +159,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -179,16 +179,16 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -199,7 +199,7 @@ exports[`renders ./components/carousel/demo/autoplay.md extend context correctly
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
-      style="display:block"
+      style="display: block;"
    >
      <li
        class="slick-active"
@ -247,22 +247,22 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
    >
      <div
        class="slick-track"
-        style="width:900%;left:-100%"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -273,16 +273,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -293,16 +293,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -313,16 +313,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -333,16 +333,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -353,16 +353,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -373,16 +373,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -393,16 +393,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -413,16 +413,16 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -433,7 +433,7 @@ exports[`renders ./components/carousel/demo/basic.md extend context correctly 1`
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
-      style="display:block"
+      style="display: block;"
    >
      <li
        class="slick-active"
@ -481,22 +481,22 @@ exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`]
    >
      <div
        class="slick-track"
-        style="width:900%;left:-100%"
+        style="opacity: 1;"
      >
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline:none;width:11.11111111111111%;position:relative;left:0;opacity:1;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -507,16 +507,16 @@ exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`]
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-11px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -527,16 +527,16 @@ exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`]
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-22px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -547,16 +547,16 @@ exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`]
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-33px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -567,7 +567,7 @@ exports[`renders ./components/carousel/demo/fade.md extend context correctly 1`]
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
-      style="display:block"
+      style="display: block;"
    >
      <li
        class="slick-active"
@ -606,7 +606,7 @@ exports[`renders ./components/carousel/demo/position.md extend context correctly
 Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -698,22 +698,22 @@ Array [
      >
        <div
          class="slick-track"
-          style="width:900%;left:-100%"
+          style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
        >
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="-1"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
@ -724,16 +724,16 @@ Array [
            aria-hidden="false"
            class="slick-slide slick-active slick-current"
            data-index="0"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  1
                </h3>
@ -744,16 +744,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="1"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  2
                </h3>
@ -764,16 +764,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="2"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  3
                </h3>
@ -784,16 +784,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="3"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
@ -804,16 +804,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="4"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  1
                </h3>
@ -824,16 +824,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="5"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  2
                </h3>
@ -844,16 +844,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="6"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  3
                </h3>
@ -864,16 +864,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="7"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
@ -884,7 +884,7 @@ Array [
      </div>
      <ul
        class="slick-dots slick-dots-top"
-        style="display:block"
+        style="display: block;"
      >
        <li
          class="slick-active"
--- a/components/carousel/tests/snapshots/demo.test.ts.snap
+++ b/components/carousel/tests/snapshots/demo.test.ts.snap
@ -13,22 +13,22 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
    >
      <div
        class="slick-track"
-        style="width:900%;left:-100%"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -39,16 +39,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -59,16 +59,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -79,16 +79,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -99,16 +99,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -119,16 +119,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -139,16 +139,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -159,16 +159,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -179,16 +179,16 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -199,7 +199,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
-      style="display:block"
+      style="display: block;"
    >
      <li
        class="slick-active"
@ -247,22 +247,22 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
    >
      <div
        class="slick-track"
-        style="width:900%;left:-100%"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -273,16 +273,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -293,16 +293,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -313,16 +313,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -333,16 +333,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
-          style="outline:none;width:11.11111111111111%"
+          style="outline: none; width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -353,16 +353,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="4"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -373,16 +373,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="5"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -393,16 +393,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="6"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -413,16 +413,16 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="7"
-          style="width:11.11111111111111%"
+          style="width: 0px;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -433,7 +433,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
-      style="display:block"
+      style="display: block;"
    >
      <li
        class="slick-active"
@ -481,22 +481,22 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
    >
      <div
        class="slick-track"
-        style="width:900%;left:-100%"
+        style="opacity: 1;"
      >
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline:none;width:11.11111111111111%;position:relative;left:0;opacity:1;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                1
              </h3>
@ -507,16 +507,16 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="1"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-11px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                2
              </h3>
@ -527,16 +527,16 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="2"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-22px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                3
              </h3>
@ -547,16 +547,16 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
          aria-hidden="true"
          class="slick-slide"
          data-index="3"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-33px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
          tabindex="-1"
        >
          <div>
            <div
-              style="width:100%;display:inline-block"
+              style="width: 100%; display: inline-block;"
              tabindex="-1"
            >
              <h3
-                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
              >
                4
              </h3>
@ -567,7 +567,7 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
    </div>
    <ul
      class="slick-dots slick-dots-bottom"
-      style="display:block"
+      style="display: block;"
    >
      <li
        class="slick-active"
@ -606,7 +606,7 @@ exports[`renders ./components/carousel/demo/position.md correctly 1`] = `
 Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <label
      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
@ -698,22 +698,22 @@ Array [
      >
        <div
          class="slick-track"
-          style="width:900%;left:-100%"
+          style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
        >
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="-1"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
@ -724,16 +724,16 @@ Array [
            aria-hidden="false"
            class="slick-slide slick-active slick-current"
            data-index="0"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  1
                </h3>
@ -744,16 +744,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="1"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  2
                </h3>
@ -764,16 +764,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="2"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  3
                </h3>
@ -784,16 +784,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="3"
-            style="outline:none;width:11.11111111111111%"
+            style="outline: none; width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
@ -804,16 +804,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="4"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  1
                </h3>
@ -824,16 +824,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="5"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  2
                </h3>
@ -844,16 +844,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="6"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  3
                </h3>
@ -864,16 +864,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="7"
-            style="width:11.11111111111111%"
+            style="width: 0px;"
            tabindex="-1"
          >
            <div>
              <div
-                style="width:100%;display:inline-block"
+                style="width: 100%; display: inline-block;"
                tabindex="-1"
              >
                <h3
-                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
                >
                  4
                </h3>
@ -884,7 +884,7 @@ Array [
      </div>
      <ul
        class="slick-dots slick-dots-top"
-        style="display:block"
+        style="display: block;"
      >
        <li
          class="slick-active"
--- a/components/carousel/tests/snapshots/index.test.tsx.snap
+++ b/components/carousel/tests/snapshots/index.test.tsx.snap
--- a/components/carousel/tests/demo.test.ts
+++ b/components/carousel/tests/demo.test.ts
--- a/components/carousel/tests/index.test.tsx
+++ b/components/carousel/tests/index.test.tsx
@ -1,4 +1,5 @@
 import React from 'react';
+import type { CarouselRef } from '..';
 import Carousel from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@ -25,18 +26,18 @@ describe('Carousel', () => {
  }

  it('should has innerSlider', () => {
-    const ref = React.createRef();
+    const ref = React.createRef<CarouselRef>();
    render(
      <Carousel ref={ref}>
        <div />
      </Carousel>,
    );
-    const { innerSlider } = ref.current;
+    const { innerSlider } = ref.current || {};
    expect(typeof innerSlider.slickNext).toBe('function');
  });

  it('should has prev, next and go function', async () => {
-    const ref = React.createRef();
+    const ref = React.createRef<CarouselRef>();
    render(
      <Carousel ref={ref}>
        <div>1</div>
@ -44,28 +45,28 @@ describe('Carousel', () => {
        <div>3</div>
      </Carousel>,
    );
-    const { prev, next, goTo } = ref.current;
+    const { prev, next, goTo } = ref.current || {};
    expect(typeof prev).toBe('function');
    expect(typeof next).toBe('function');
    expect(typeof goTo).toBe('function');
-    expect(ref.current.innerSlider.state.currentSlide).toBe(0);
-    ref.current.goTo(2);
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(0);
+    ref.current?.goTo(2);
    runAllTimersWithAct(1);
-    expect(ref.current.innerSlider.state.currentSlide).toBe(2);
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(2);
    // wait for animation to be finished
    runAllTimersWithAct(2);
-    ref.current.prev();
+    ref.current?.prev();
    runAllTimersWithAct(1);
-    expect(ref.current.innerSlider.state.currentSlide).toBe(1);
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(1);
    runAllTimersWithAct(2);
-    ref.current.next();
+    ref.current?.next();
    runAllTimersWithAct(1);
-    expect(ref.current.innerSlider.state.currentSlide).toBe(2);
+    expect(ref.current?.innerSlider.state.currentSlide).toBe(2);
  });

  it('should trigger autoPlay after window resize', async () => {
    jest.useRealTimers();
-    const ref = React.createRef();
+    const ref = React.createRef<CarouselRef>();
    render(
      <Carousel autoplay ref={ref}>
        <div>1</div>
@ -73,7 +74,7 @@ describe('Carousel', () => {
        <div>3</div>
      </Carousel>,
    );
-    const spy = jest.spyOn(ref.current.innerSlider, 'autoPlay');
+    const spy = jest.spyOn(ref.current?.innerSlider, 'autoPlay');
    window.resizeTo(1000, window.outerHeight);
    expect(spy).not.toHaveBeenCalled();
    await sleep(500);
@ -94,7 +95,7 @@ describe('Carousel', () => {
  });

  describe('should works for dotPosition', () => {
-    ['left', 'right', 'top', 'bottom'].forEach(dotPosition => {
+    (['left', 'right', 'top', 'bottom'] as const).forEach(dotPosition => {
      // eslint-disable-next-line jest/valid-title
      it(dotPosition, () => {
        const { container } = render(
--- a/components/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
@ -12,14 +12,15 @@ exports[`renders ./components/cascader/demo/basic.md extend context correctly 1`
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -33,8 +34,8 @@ exports[`renders ./components/cascader/demo/basic.md extend context correctly 1`
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -124,7 +125,7 @@ exports[`renders ./components/cascader/demo/basic.md extend context correctly 1`
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -162,14 +163,15 @@ exports[`renders ./components/cascader/demo/change-on-select.md extend context c
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -181,8 +183,8 @@ exports[`renders ./components/cascader/demo/change-on-select.md extend context c
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -272,7 +274,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md extend context c
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -310,14 +312,15 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md extend context co
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -331,8 +334,8 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md extend context co
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div>
@ -420,10 +423,10 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md extend context co
          <div
            class="ant-divider ant-divider-horizontal"
            role="separator"
-            style="margin:0"
+            style="margin: 0px;"
          />
          <div
-            style="padding:8px"
+            style="padding: 8px;"
          >
            The footer is not very short.
          </div>
@ -434,7 +437,7 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md extend context co
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -463,7 +466,7 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md extend context co
 exports[`renders ./components/cascader/demo/custom-render.md extend context correctly 1`] = `
 <div
  class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-select-selector"
@ -473,14 +476,15 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -490,13 +494,16 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr
      class="ant-select-selection-item"
    >
      <span>
-        Zhejiang / 
+        Zhejiang
+         / 
      </span>
      <span>
-        Hangzhou / 
+        Hangzhou
+         / 
      </span>
      <span>
-        West Lake (
+        West Lake
+         (
        <a>
          752100
        </a>
@ -506,8 +513,8 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -597,7 +604,7 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -623,7 +630,7 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr
  <span
    aria-hidden="true"
    class="ant-select-clear"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -651,7 +658,7 @@ exports[`renders ./components/cascader/demo/custom-render.md extend context corr

 exports[`renders ./components/cascader/demo/custom-trigger.md extend context correctly 1`] = `
 <span>
-  Unselect 
+  Unselect
  <a
    href="#"
  >
@ -659,8 +666,8 @@ exports[`renders ./components/cascader/demo/custom-trigger.md extend context cor
  </a>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -762,14 +769,15 @@ exports[`renders ./components/cascader/demo/default-value.md extend context corr
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -784,8 +792,8 @@ exports[`renders ./components/cascader/demo/default-value.md extend context corr
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -875,7 +883,7 @@ exports[`renders ./components/cascader/demo/default-value.md extend context corr
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -901,7 +909,7 @@ exports[`renders ./components/cascader/demo/default-value.md extend context corr
  <span
    aria-hidden="true"
    class="ant-select-clear"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -939,14 +947,15 @@ exports[`renders ./components/cascader/demo/disabled-option.md extend context co
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -958,8 +967,8 @@ exports[`renders ./components/cascader/demo/disabled-option.md extend context co
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -1049,7 +1058,7 @@ exports[`renders ./components/cascader/demo/disabled-option.md extend context co
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -1087,14 +1096,15 @@ exports[`renders ./components/cascader/demo/fields-name.md extend context correc
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -1108,8 +1118,8 @@ exports[`renders ./components/cascader/demo/fields-name.md extend context correc
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -1199,7 +1209,7 @@ exports[`renders ./components/cascader/demo/fields-name.md extend context correc
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -1237,14 +1247,15 @@ exports[`renders ./components/cascader/demo/hover.md extend context correctly 1`
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -1256,8 +1267,8 @@ exports[`renders ./components/cascader/demo/hover.md extend context correctly 1`
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -1347,7 +1358,7 @@ exports[`renders ./components/cascader/demo/hover.md extend context correctly 1`
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -1385,14 +1396,15 @@ exports[`renders ./components/cascader/demo/lazy.md extend context correctly 1`]
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -1404,8 +1416,8 @@ exports[`renders ./components/cascader/demo/lazy.md extend context correctly 1`]
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -1495,7 +1507,7 @@ exports[`renders ./components/cascader/demo/lazy.md extend context correctly 1`]
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -1524,7 +1536,7 @@ exports[`renders ./components/cascader/demo/lazy.md extend context correctly 1`]
 exports[`renders ./components/cascader/demo/multiple.md extend context correctly 1`] = `
 <div
  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-select-selector"
@ -1534,22 +1546,23 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly
    >
      <div
        class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-        style="opacity:1;order:0"
+        style="opacity: 1; order: 0;"
      >
        <div
          class="ant-select-selection-search"
-          style="width:0"
+          style="width: 0px;"
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -1558,7 +1571,6 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly
            aria-hidden="true"
            class="ant-select-selection-search-mirror"
          >
-             
          </span>
        </div>
      </div>
@ -1569,8 +1581,8 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -1770,14 +1782,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1791,8 +1804,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-down-appear ant-slide-down-appear-prepare ant-slide-down"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -1882,7 +1895,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1921,11 +1934,12 @@ exports[`renders ./components/cascader/demo/search.md extend context correctly 1
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        role="combobox"
        type="search"
        value=""
@ -1939,8 +1953,8 @@ exports[`renders ./components/cascader/demo/search.md extend context correctly 1
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-cascader-dropdown"
-      style="opacity:0;min-width:auto"
+      class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+      style="opacity: 0; min-width: auto;"
    >
      <div>
        <div
@ -2030,7 +2044,7 @@ exports[`renders ./components/cascader/demo/search.md extend context correctly 1
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -2060,7 +2074,7 @@ exports[`renders ./components/cascader/demo/showCheckedStrategy.md extend contex
 Array [
  <div
    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-select-selector"
@ -2071,7 +2085,7 @@ Array [
        <div
          aria-hidden="true"
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
-          style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
+          style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
        >
          <span
            class="ant-select-selection-item"
@ -2086,22 +2100,23 @@ Array [
        </div>
        <div
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-          style="opacity:1;order:0"
+          style="opacity: 1; order: 0;"
        >
          <div
            class="ant-select-selection-search"
-            style="width:0"
+            style="width: 0px;"
          >
            <input
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -2110,7 +2125,6 @@ Array [
              aria-hidden="true"
              class="ant-select-selection-search-mirror"
            >
-               
            </span>
          </div>
        </div>
@ -2118,8 +2132,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -2223,7 +2237,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-clear"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -2251,7 +2265,7 @@ Array [
  <br />,
  <div
    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-select-selector"
@ -2262,7 +2276,7 @@ Array [
        <div
          aria-hidden="true"
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
-          style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
+          style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
        >
          <span
            class="ant-select-selection-item"
@ -2277,22 +2291,23 @@ Array [
        </div>
        <div
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-          style="opacity:1;order:0"
+          style="opacity: 1; order: 0;"
        >
          <div
            class="ant-select-selection-search"
-            style="width:0"
+            style="width: 0px;"
          >
            <input
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -2301,7 +2316,6 @@ Array [
              aria-hidden="true"
              class="ant-select-selection-search-mirror"
            >
-               
            </span>
          </div>
        </div>
@ -2309,8 +2323,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -2414,7 +2428,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-clear"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -2454,14 +2468,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -2473,8 +2488,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -2564,7 +2579,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -2601,14 +2616,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -2620,8 +2636,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -2711,7 +2727,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -2748,14 +2764,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -2767,8 +2784,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -2858,7 +2875,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -2893,7 +2910,7 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-select ant-cascader ant-select-status-error ant-select-single ant-select-allow-clear ant-select-show-arrow"
@ -2906,14 +2923,15 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -2927,8 +2945,8 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
      </div>
      <div>
        <div
-          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty"
-          style="opacity:0"
+          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
        >
          <div>
            <div
@ -3003,7 +3021,7 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -3042,22 +3060,23 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
        >
          <div
            class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-            style="opacity:1"
+            style="opacity: 1;"
          >
            <div
              class="ant-select-selection-search"
-              style="width:0"
+              style="width: 0px;"
            >
              <input
                aria-autocomplete="list"
-                aria-controls="undefined_list"
+                aria-controls="rc_select_test_list"
                aria-haspopup="listbox"
-                aria-owns="undefined_list"
+                aria-owns="rc_select_test_list"
                autocomplete="off"
                class="ant-select-selection-search-input"
+                id="rc_select_test"
                readonly=""
                role="combobox"
-                style="opacity:0"
+                style="opacity: 0;"
                type="search"
                unselectable="on"
                value=""
@ -3066,7 +3085,6 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
                aria-hidden="true"
                class="ant-select-selection-search-mirror"
              >
-                 
              </span>
            </div>
          </div>
@ -3079,8 +3097,8 @@ exports[`renders ./components/cascader/demo/status.md extend context correctly 1
      </div>
      <div>
        <div
-          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty"
-          style="opacity:0"
+          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
        >
          <div>
            <div
@ -3170,14 +3188,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -3191,8 +3210,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -3282,7 +3301,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -3319,14 +3338,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -3340,8 +3360,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -3431,7 +3451,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      ab
@ -3450,14 +3470,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -3471,8 +3492,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -3562,7 +3583,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -3599,14 +3620,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -3620,8 +3642,8 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;min-width:auto"
+        class="ant-select-dropdown ant-cascader-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0; min-width: auto;"
      >
        <div>
          <div
@ -3675,7 +3697,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
--- a/components/cascader/tests/snapshots/demo.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo.test.ts.snap
@ -12,14 +12,15 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -34,7 +35,7 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -72,14 +73,15 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -92,7 +94,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -130,14 +132,15 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -152,7 +155,7 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -181,7 +184,7 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
 exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
 <div
  class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-select-selector"
@ -191,14 +194,15 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -208,13 +212,16 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
      class="ant-select-selection-item"
    >
      <span>
-        Zhejiang / 
+        Zhejiang
+         / 
      </span>
      <span>
-        Hangzhou / 
+        Hangzhou
+         / 
      </span>
      <span>
-        West Lake (
+        West Lake
+         (
        <a>
          752100
        </a>
@ -225,7 +232,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -251,7 +258,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-clear"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -279,7 +286,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `

 exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
 <span>
-  Unselect 
+  Unselect
  <a
    href="#"
  >
@ -300,14 +307,15 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -323,7 +331,7 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -349,7 +357,7 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-clear"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -387,14 +395,15 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -407,7 +416,7 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -445,14 +454,15 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -467,7 +477,7 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -505,14 +515,15 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -525,7 +536,7 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -563,14 +574,15 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        readonly=""
        role="combobox"
-        style="opacity:0"
+        style="opacity: 0;"
        type="search"
        unselectable="on"
        value=""
@ -583,7 +595,7 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -612,7 +624,7 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
 exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
 <div
  class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-select-selector"
@ -622,22 +634,23 @@ exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
    >
      <div
        class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-        style="opacity:1;order:0"
+        style="opacity: 1; order: 0;"
      >
        <div
          class="ant-select-selection-search"
-          style="width:0"
+          style="width: 0px;"
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -646,7 +659,6 @@ exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
            aria-hidden="true"
            class="ant-select-selection-search-mirror"
          >
-             
          </span>
        </div>
      </div>
@ -754,14 +766,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -776,7 +789,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -815,11 +828,12 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="undefined_list"
+        aria-controls="rc_select_test_list"
        aria-haspopup="listbox"
-        aria-owns="undefined_list"
+        aria-owns="rc_select_test_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
+        id="rc_select_test"
        role="combobox"
        type="search"
        value=""
@ -834,7 +848,7 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select:none;-webkit-user-select:none"
+    style="user-select: none;"
    unselectable="on"
  >
    <span
@ -864,7 +878,7 @@ exports[`renders ./components/cascader/demo/showCheckedStrategy.md correctly 1`]
 Array [
  <div
    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-select-selector"
@ -875,7 +889,7 @@ Array [
        <div
          aria-hidden="true"
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
-          style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
+          style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
        >
          <span
            class="ant-select-selection-item"
@ -890,22 +904,23 @@ Array [
        </div>
        <div
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-          style="opacity:1;order:0"
+          style="opacity: 1; order: 0;"
        >
          <div
            class="ant-select-selection-search"
-            style="width:0"
+            style="width: 0px;"
          >
            <input
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -914,7 +929,6 @@ Array [
              aria-hidden="true"
              class="ant-select-selection-search-mirror"
            >
-               
            </span>
          </div>
        </div>
@ -923,7 +937,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-clear"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -951,7 +965,7 @@ Array [
  <br />,
  <div
    class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-select-selector"
@ -962,7 +976,7 @@ Array [
        <div
          aria-hidden="true"
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
-          style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
+          style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
        >
          <span
            class="ant-select-selection-item"
@ -977,22 +991,23 @@ Array [
        </div>
        <div
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-          style="opacity:1;order:0"
+          style="opacity: 1; order: 0;"
        >
          <div
            class="ant-select-selection-search"
-            style="width:0"
+            style="width: 0px;"
          >
            <input
              aria-autocomplete="list"
-              aria-controls="undefined_list"
+              aria-controls="rc_select_test_list"
              aria-haspopup="listbox"
-              aria-owns="undefined_list"
+              aria-owns="rc_select_test_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
+              id="rc_select_test"
              readonly=""
              role="combobox"
-              style="opacity:0"
+              style="opacity: 0;"
              type="search"
              unselectable="on"
              value=""
@ -1001,7 +1016,6 @@ Array [
              aria-hidden="true"
              class="ant-select-selection-search-mirror"
            >
-               
            </span>
          </div>
        </div>
@ -1010,7 +1024,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-clear"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1050,14 +1064,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1070,7 +1085,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1107,14 +1122,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1127,7 +1143,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1164,14 +1180,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1184,7 +1201,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1219,7 +1236,7 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-select ant-cascader ant-select-status-error ant-select-single ant-select-allow-clear ant-select-show-arrow"
@ -1232,14 +1249,15 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -1254,7 +1272,7 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -1293,22 +1311,23 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
        >
          <div
            class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
-            style="opacity:1"
+            style="opacity: 1;"
          >
            <div
              class="ant-select-selection-search"
-              style="width:0"
+              style="width: 0px;"
            >
              <input
                aria-autocomplete="list"
-                aria-controls="undefined_list"
+                aria-controls="rc_select_test_list"
                aria-haspopup="listbox"
-                aria-owns="undefined_list"
+                aria-owns="rc_select_test_list"
                autocomplete="off"
                class="ant-select-selection-search-input"
+                id="rc_select_test"
                readonly=""
                role="combobox"
-                style="opacity:0"
+                style="opacity: 0;"
                type="search"
                unselectable="on"
                value=""
@ -1317,7 +1336,6 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
                aria-hidden="true"
                class="ant-select-selection-search-mirror"
              >
-                 
              </span>
            </div>
          </div>
@ -1346,14 +1364,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1368,7 +1387,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1405,14 +1424,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1427,7 +1447,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      ab
@ -1446,14 +1466,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1468,7 +1489,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1505,14 +1526,15 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -1527,7 +1549,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
--- a/components/checkbox/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/checkbox/tests/snapshots/demo-extend.test.ts.snap
@ -10,6 +10,7 @@ exports[`renders ./components/checkbox/demo/basic.md extend context correctly 1`
    <input
      class="ant-checkbox-input"
      type="checkbox"
+      value=""
    />
    <span
      class="ant-checkbox-inner"
@ -33,6 +34,7 @@ Array [
        aria-checked="mixed"
        class="ant-checkbox-input"
        type="checkbox"
+        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -115,7 +117,7 @@ Array [
 exports[`renders ./components/checkbox/demo/controller.md extend context correctly 1`] = `
 Array [
  <p
-    style="margin-bottom:20px"
+    style="margin-bottom: 20px;"
  >
    <label
      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
@ -127,6 +129,7 @@ Array [
          checked=""
          class="ant-checkbox-input"
          type="checkbox"
+          value=""
        />
        <span
          class="ant-checkbox-inner"
@ -148,7 +151,7 @@ Array [
    </button>
    <button
      class="ant-btn ant-btn-primary ant-btn-sm"
-      style="margin:0 10px"
+      style="margin: 0px 10px;"
      type="button"
    >
      <span>
@ -163,11 +166,11 @@ exports[`renders ./components/checkbox/demo/debug-line.md extend context correct
 <div>
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="border:1px solid red;margin-bottom:16px"
+    style="border: 1px solid red; margin-bottom: 16px;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <label
        class="ant-checkbox-wrapper"
@ -188,7 +191,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md extend context correct
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <div>
        Bamboo
@ -220,11 +223,11 @@ exports[`renders ./components/checkbox/demo/debug-line.md extend context correct
  </div>
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="border:1px solid red;margin-bottom:16px"
+    style="border: 1px solid red; margin-bottom: 16px;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <label
        class="ant-radio-wrapper"
@ -245,7 +248,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md extend context correct
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <div>
        Bamboo
@ -276,7 +279,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md extend context correct
    </div>
  </div>
  <div
-    style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
+    style="border: 1px solid red; margin-bottom: 16px; display: flex; align-items: center;"
  >
    <label
      class="ant-checkbox-wrapper"
@ -318,7 +321,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md extend context correct
    </label>
  </div>
  <div
-    style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
+    style="border: 1px solid red; margin-bottom: 16px; display: flex; align-items: center;"
  >
    <label
      class="ant-radio-wrapper"
@ -374,6 +377,7 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
+        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -392,6 +396,7 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
+        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -602,7 +607,7 @@ Array [
 exports[`renders ./components/checkbox/demo/layout.md extend context correctly 1`] = `
 <div
  class="ant-checkbox-group"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-row"
--- a/components/checkbox/tests/snapshots/demo.test.ts.snap
+++ b/components/checkbox/tests/snapshots/demo.test.ts.snap
@ -10,6 +10,7 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
    <input
      class="ant-checkbox-input"
      type="checkbox"
+      value=""
    />
    <span
      class="ant-checkbox-inner"
@ -33,6 +34,7 @@ Array [
        aria-checked="mixed"
        class="ant-checkbox-input"
        type="checkbox"
+        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -115,7 +117,7 @@ Array [
 exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
 Array [
  <p
-    style="margin-bottom:20px"
+    style="margin-bottom: 20px;"
  >
    <label
      class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
@ -127,6 +129,7 @@ Array [
          checked=""
          class="ant-checkbox-input"
          type="checkbox"
+          value=""
        />
        <span
          class="ant-checkbox-inner"
@ -148,7 +151,7 @@ Array [
    </button>
    <button
      class="ant-btn ant-btn-primary ant-btn-sm"
-      style="margin:0 10px"
+      style="margin: 0px 10px;"
      type="button"
    >
      <span>
@ -163,11 +166,11 @@ exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
 <div>
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="border:1px solid red;margin-bottom:16px"
+    style="border: 1px solid red; margin-bottom: 16px;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <label
        class="ant-checkbox-wrapper"
@ -188,7 +191,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <div>
        Bamboo
@ -220,11 +223,11 @@ exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
  </div>
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
-    style="border:1px solid red;margin-bottom:16px"
+    style="border: 1px solid red; margin-bottom: 16px;"
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <label
        class="ant-radio-wrapper"
@ -245,7 +248,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
    </div>
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      <div>
        Bamboo
@ -276,7 +279,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
    </div>
  </div>
  <div
-    style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
+    style="border: 1px solid red; margin-bottom: 16px; display: flex; align-items: center;"
  >
    <label
      class="ant-checkbox-wrapper"
@ -318,7 +321,7 @@ exports[`renders ./components/checkbox/demo/debug-line.md correctly 1`] = `
    </label>
  </div>
  <div
-    style="border:1px solid red;margin-bottom:16px;display:flex;align-items:center"
+    style="border: 1px solid red; margin-bottom: 16px; display: flex; align-items: center;"
  >
    <label
      class="ant-radio-wrapper"
@ -374,6 +377,7 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
+        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -392,6 +396,7 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
+        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -602,7 +607,7 @@ Array [
 exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
 <div
  class="ant-checkbox-group"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-row"
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@ -156,7 +156,7 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -179,11 +179,9 @@ exports[`renders ./components/collapse/demo/basic.md extend context correctly 1`
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
@ -299,7 +297,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -322,7 +320,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
        class="ant-collapse-content-box"
      >
        <p
-          style="padding-left:24px"
+          style="padding-left: 24px;"
        >
          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
        </p>
@ -418,7 +416,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-collapse ant-collapse-icon-position-start"
@ -445,7 +443,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
                fill="currentColor"
                focusable="false"
                height="1em"
-                style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+                style="transform: rotate(90deg);"
                viewBox="64 64 896 896"
                width="1em"
              >
@ -468,11 +466,9 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
            class="ant-collapse-content-box"
          >
            <p>
-              
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
            </p>
          </div>
        </div>
@ -558,7 +554,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="0 0 1024 1024"
            width="1em"
          >
@ -581,11 +577,9 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
@ -702,7 +696,7 @@ Array [
              fill="currentColor"
              focusable="false"
              height="1em"
-              style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+              style="transform: rotate(90deg);"
              viewBox="64 64 896 896"
              width="1em"
            >
@ -749,11 +743,9 @@ Array [
          class="ant-collapse-content-box"
        >
          <div>
-            
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
          </div>
        </div>
      </div>
@ -893,7 +885,7 @@ Array [
  </span>,
  <div
    class="ant-select ant-select-single ant-select-show-arrow"
-    style="margin:0 8px"
+    style="margin: 0px 8px;"
  >
    <div
      class="ant-select-selector"
@ -902,16 +894,17 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="undefined_list_0"
+          aria-activedescendant="rc_select_test_list_test"
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -926,19 +919,19 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown"
-        style="opacity:0"
+        class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+        style="opacity: 0;"
      >
        <div>
          <div
-            id="undefined_list"
+            id="rc_select_test_list"
            role="listbox"
-            style="height:0;width:0;overflow:hidden"
+            style="height: 0px; width: 0px; overflow: hidden;"
          >
            <div
              aria-label="start"
              aria-selected="true"
-              id="undefined_list_0"
+              id="rc_select_test_list_test"
              role="option"
            >
              start
@ -946,7 +939,7 @@ Array [
            <div
              aria-label="end"
              aria-selected="false"
-              id="undefined_list_1"
+              id="rc_select_test_list_test"
              role="option"
            >
              end
@ -954,16 +947,16 @@ Array [
          </div>
          <div
            class="rc-virtual-list"
-            style="position:relative"
+            style="position: relative;"
          >
            <div
              class="rc-virtual-list-holder"
-              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+              style="max-height: 256px; overflow-y: auto;"
            >
              <div>
                <div
                  class="rc-virtual-list-holder-inner"
-                  style="display:flex;flex-direction:column"
+                  style="display: flex; flex-direction: column;"
                >
                  <div
                    aria-selected="true"
@ -978,7 +971,7 @@ Array [
                    <span
                      aria-hidden="true"
                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
+                      style="user-select: none;"
                      unselectable="on"
                    />
                  </div>
@ -995,7 +988,7 @@ Array [
                    <span
                      aria-hidden="true"
                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
+                      style="user-select: none;"
                      unselectable="on"
                    />
                  </div>
@ -1009,7 +1002,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -1064,7 +1057,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -1087,11 +1080,9 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
@ -1334,7 +1325,7 @@ exports[`renders ./components/collapse/demo/noarrow.md extend context correctly
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -1357,11 +1348,9 @@ exports[`renders ./components/collapse/demo/noarrow.md extend context correctly
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
--- a/components/collapse/tests/snapshots/demo.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo.test.ts.snap
@ -156,7 +156,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -179,11 +179,9 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
@ -299,7 +297,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -322,7 +320,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
        class="ant-collapse-content-box"
      >
        <p
-          style="padding-left:24px"
+          style="padding-left: 24px;"
        >
          A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
        </p>
@ -418,7 +416,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-collapse ant-collapse-icon-position-start"
@ -445,7 +443,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
                fill="currentColor"
                focusable="false"
                height="1em"
-                style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+                style="transform: rotate(90deg);"
                viewBox="64 64 896 896"
                width="1em"
              >
@ -468,11 +466,9 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
            class="ant-collapse-content-box"
          >
            <p>
-              
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
            </p>
          </div>
        </div>
@ -558,7 +554,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="0 0 1024 1024"
            width="1em"
          >
@ -581,11 +577,9 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
@ -702,7 +696,7 @@ Array [
              fill="currentColor"
              focusable="false"
              height="1em"
-              style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+              style="transform: rotate(90deg);"
              viewBox="64 64 896 896"
              width="1em"
            >
@ -749,11 +743,9 @@ Array [
          class="ant-collapse-content-box"
        >
          <div>
-            
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
          </div>
        </div>
      </div>
@ -893,7 +885,7 @@ Array [
  </span>,
  <div
    class="ant-select ant-select-single ant-select-show-arrow"
-    style="margin:0 8px"
+    style="margin: 0px 8px;"
  >
    <div
      class="ant-select-selector"
@ -902,16 +894,17 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="undefined_list_0"
+          aria-activedescendant="rc_select_test_list_test"
          aria-autocomplete="list"
-          aria-controls="undefined_list"
+          aria-controls="rc_select_test_list"
          aria-haspopup="listbox"
-          aria-owns="undefined_list"
+          aria-owns="rc_select_test_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
+          id="rc_select_test"
          readonly=""
          role="combobox"
-          style="opacity:0"
+          style="opacity: 0;"
          type="search"
          unselectable="on"
          value=""
@ -927,7 +920,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
+      style="user-select: none;"
      unselectable="on"
    >
      <span
@ -982,7 +975,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -1005,11 +998,9 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
@ -1252,7 +1243,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+            style="transform: rotate(90deg);"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -1275,11 +1266,9 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
        class="ant-collapse-content-box"
      >
        <p>
-          
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
-
        </p>
      </div>
    </div>
--- a/components/comment/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/comment/tests/snapshots/demo-extend.test.ts.snap
@ -36,12 +36,12 @@ exports[`renders ./components/comment/demo/basic.md extend context correctly 1`]
          class="ant-comment-content-author-time"
        >
          <span>
-            a few seconds ago
+            8 hours ago
          </span>
          <div>
            <div
-              class="ant-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -57,7 +57,7 @@ exports[`renders ./components/comment/demo/basic.md extend context correctly 1`]
                  class="ant-tooltip-inner"
                  role="tooltip"
                >
-                  2016-11-22 00:00:00
+                  2016-11-22 11:22:33
                </div>
              </div>
            </div>
@ -103,8 +103,8 @@ exports[`renders ./components/comment/demo/basic.md extend context correctly 1`]
          </span>
          <div>
            <div
-              class="ant-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -155,8 +155,8 @@ exports[`renders ./components/comment/demo/basic.md extend context correctly 1`]
          </span>
          <div>
            <div
-              class="ant-tooltip"
-              style="opacity:0"
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+              style="opacity: 0;"
            >
              <div
                class="ant-tooltip-content"
@ -320,12 +320,12 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                    class="ant-comment-content-author-time"
                  >
                    <span>
-                      a day ago
+                      8 hours ago
                    </span>
                    <div>
                      <div
-                        class="ant-tooltip"
-                        style="opacity:0"
+                        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                        style="opacity: 0;"
                      >
                        <div
                          class="ant-tooltip-content"
@ -341,7 +341,7 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                            class="ant-tooltip-inner"
                            role="tooltip"
                          >
-                            2016-11-21 00:00:00
+                            2016-11-22 11:22:33
                          </div>
                        </div>
                      </div>
@ -398,12 +398,12 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                    class="ant-comment-content-author-time"
                  >
                    <span>
-                      2 days ago
+                      9 hours ago
                    </span>
                    <div>
                      <div
-                        class="ant-tooltip"
-                        style="opacity:0"
+                        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                        style="opacity: 0;"
                      >
                        <div
                          class="ant-tooltip-content"
@ -419,7 +419,7 @@ exports[`renders ./components/comment/demo/list.md extend context correctly 1`]
                            class="ant-tooltip-inner"
                            role="tooltip"
                          >
-                            2016-11-20 00:00:00
+                            2016-11-22 10:22:33
                          </div>
                        </div>
                      </div>
--- a/components/comment/tests/snapshots/demo.test.ts.snap
+++ b/components/comment/tests/snapshots/demo.test.ts.snap
@ -36,7 +36,7 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
          class="ant-comment-content-author-time"
        >
          <span>
-            a few seconds ago
+            8 hours ago
          </span>
        </span>
      </div>
@ -248,7 +248,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
                    class="ant-comment-content-author-time"
                  >
                    <span>
-                      a day ago
+                      8 hours ago
                    </span>
                  </span>
                </div>
@ -302,7 +302,7 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
                    class="ant-comment-content-author-time"
                  >
                    <span>
-                      2 days ago
+                      9 hours ago
                    </span>
                  </span>
                </div>
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@ -16,7 +16,6 @@ A basic comment with author, avatar, time and actions.
 ```tsx
 import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
 import { Avatar, Comment, Tooltip } from 'antd';
-import moment from 'moment';
 import React, { createElement, useState } from 'react';

 const App: React.FC = () => {
@ -65,8 +64,8 @@ const App: React.FC = () => {
        </p>
      }
      datetime={
-        <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
-          <span>{moment().fromNow()}</span>
+        <Tooltip title="2016-11-22 11:22:33">
+          <span>8 hours ago</span>
        </Tooltip>
      }
    />
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@ -75,7 +75,7 @@ const App: React.FC = () => {
          author: 'Han Solo',
          avatar: 'https://joeschmoe.io/api/v1/random',
          content: <p>{value}</p>,
-          datetime: moment().fromNow(),
+          datetime: moment('2016-11-22').fromNow(),
        },
      ]);
    }, 1000);
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@ -15,7 +15,6 @@ Displaying a series of comments using the `antd` List Component.

 ```tsx
 import { Comment, List, Tooltip } from 'antd';
-import moment from 'moment';
 import React from 'react';

 const data = [
@ -31,8 +30,8 @@ const data = [
      </p>
    ),
    datetime: (
-      <Tooltip title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        <span>{moment().subtract(1, 'days').fromNow()}</span>
+      <Tooltip title="2016-11-22 11:22:33">
+        <span>8 hours ago</span>
      </Tooltip>
    ),
  },
@ -48,8 +47,8 @@ const data = [
      </p>
    ),
    datetime: (
-      <Tooltip title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        <span>{moment().subtract(2, 'days').fromNow()}</span>
+      <Tooltip title="2016-11-22 10:22:33">
+        <span>9 hours ago</span>
      </Tooltip>
    ),
  },
--- a/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
--- a/components/date-picker/tests/snapshots/demo.test.ts.snap
+++ b/components/date-picker/tests/snapshots/demo.test.ts.snap
@ -6,7 +6,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-picker"
@ -50,7 +50,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-picker"
@ -94,7 +94,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-picker"
@ -138,7 +138,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-picker"
@ -232,7 +232,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-borderless"
@ -276,7 +276,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-borderless"
@ -320,7 +320,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-borderless"
@ -364,7 +364,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-borderless"
@ -408,7 +408,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range ant-picker-borderless"
@ -465,7 +465,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -494,7 +494,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range ant-picker-borderless"
@ -551,7 +551,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -580,7 +580,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range ant-picker-borderless"
@ -637,7 +637,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -722,7 +722,7 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -758,7 +758,7 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -858,7 +858,7 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -894,7 +894,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-disabled"
@ -908,8 +908,8 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
          placeholder="Select date"
          readonly=""
          size="12"
-          title=""
-          value=""
+          title="2015-06-06"
+          value="2015-06-06"
        />
        <span
          class="ant-picker-suffix"
@ -939,7 +939,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-disabled"
@ -953,8 +953,8 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
          placeholder="Select month"
          readonly=""
          size="12"
-          title=""
-          value=""
+          title="2015-06"
+          value="2015-06"
        />
        <span
          class="ant-picker-suffix"
@ -984,7 +984,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range ant-picker-disabled"
@ -998,7 +998,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
          placeholder="Start date"
          readonly=""
          size="12"
-          value=""
+          value="2015-06-06"
        />
      </div>
      <div
@ -1038,12 +1038,12 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
          placeholder="End date"
          readonly=""
          size="12"
-          value=""
+          value="2015-06-06"
        />
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -1084,7 +1084,7 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
          placeholder="Start date"
          readonly=""
          size="12"
-          value=""
+          value="2019-09-03"
        />
      </div>
      <div
@ -1124,12 +1124,12 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
          placeholder="End date"
          readonly=""
          size="12"
-          value=""
+          value="2019-11-22"
        />
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -1188,7 +1188,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1232,7 +1232,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1276,7 +1276,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -1333,7 +1333,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -1418,7 +1418,7 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -1454,7 +1454,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1498,7 +1498,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1542,7 +1542,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -1599,7 +1599,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -1628,7 +1628,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -1685,7 +1685,7 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -1764,7 +1764,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1777,8 +1777,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
          placeholder="Select date"
          readonly=""
          size="12"
-          title=""
-          value=""
+          title="2015/01/01"
+          value="2015/01/01"
        />
        <span
          class="ant-picker-suffix"
@ -1832,7 +1832,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1845,8 +1845,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
          placeholder="Select date"
          readonly=""
          size="12"
-          title=""
-          value=""
+          title="01/01/2015"
+          value="01/01/2015"
        />
        <span
          class="ant-picker-suffix"
@ -1900,7 +1900,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1913,8 +1913,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
          placeholder="Select month"
          readonly=""
          size="12"
-          title=""
-          value=""
+          title="2015/01"
+          value="2015/01"
        />
        <span
          class="ant-picker-suffix"
@ -1968,7 +1968,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -1981,8 +1981,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
          placeholder="Select week"
          readonly=""
          size="15"
-          title=""
-          value=""
+          title="11/20 ~ 11/26"
+          value="11/20 ~ 11/26"
        />
        <span
          class="ant-picker-suffix"
@ -2036,7 +2036,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -2049,7 +2049,7 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
          placeholder="Start date"
          readonly=""
          size="12"
-          value=""
+          value="2015/01/01"
        />
      </div>
      <div
@ -2088,12 +2088,12 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
          placeholder="End date"
          readonly=""
          size="12"
-          value=""
+          value="2015/01/01"
        />
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -2157,8 +2157,8 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
          placeholder="Select date"
          readonly=""
          size="27"
-          title=""
-          value=""
+          title="custom format: 2015/01/01"
+          value="custom format: 2015/01/01"
        />
        <span
          class="ant-picker-suffix"
@ -2219,7 +2219,7 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -2319,7 +2319,7 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -2530,7 +2530,7 @@ Array [
    </div>
    <div
      class="ant-picker-active-bar"
-      style="left:0;width:0;position:absolute"
+      style="left: 0px; width: 0px; position: absolute;"
    />
    <span
      class="ant-picker-suffix"
@ -2565,7 +2565,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -2622,7 +2622,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -2707,7 +2707,7 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -2743,7 +2743,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -2800,7 +2800,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -2829,7 +2829,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -2886,7 +2886,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -2915,7 +2915,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -2972,7 +2972,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -3001,7 +3001,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -3058,7 +3058,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -3087,7 +3087,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -3144,7 +3144,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -3229,7 +3229,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -3315,7 +3315,7 @@ exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`]
  </div>
  <div
    class="ant-picker-active-bar"
-    style="left:0;width:0;position:absolute"
+    style="left: 0px; width: 0px; position: absolute;"
  />
  <span
    class="ant-picker-suffix"
@ -3349,7 +3349,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-radio-group ant-radio-group-outline"
@ -3416,7 +3416,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-middle"
@ -3460,7 +3460,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-middle"
@ -3504,7 +3504,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range ant-picker-middle"
@ -3561,7 +3561,7 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -3640,7 +3640,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-picker"
@ -3731,15 +3731,15 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
 exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-picker ant-picker-status-error"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-picker-input"
@ -3780,11 +3780,11 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-picker ant-picker-status-warning"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-picker-input"
@ -3825,11 +3825,11 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-picker ant-picker-range ant-picker-status-error"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-picker-input ant-picker-input-active"
@ -3883,7 +3883,7 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -3915,7 +3915,7 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
  >
    <div
      class="ant-picker ant-picker-range ant-picker-status-warning"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-picker-input ant-picker-input-active"
@ -3969,7 +3969,7 @@ exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -4005,7 +4005,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -4049,7 +4049,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -4093,7 +4093,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -4150,7 +4150,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -4179,7 +4179,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -4223,7 +4223,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -4249,7 +4249,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -4275,7 +4275,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker ant-picker-range"
@ -4332,7 +4332,7 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
@ -4375,7 +4375,7 @@ exports[`renders ./components/date-picker/demo/switchable.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-select ant-select-single ant-select-show-arrow"
@ -4387,16 +4387,17 @@ exports[`renders ./components/date-picker/demo/switchable.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -4412,7 +4413,7 @@ exports[`renders ./components/date-picker/demo/switchable.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -4492,7 +4493,7 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom: 12px;"
  >
    <div
      class="ant-picker"
@ -4592,7 +4593,7 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
      </div>
      <div
        class="ant-picker-active-bar"
-        style="left:0;width:0;position:absolute"
+        style="left: 0px; width: 0px; position: absolute;"
      />
      <span
        class="ant-picker-suffix"
--- a/components/descriptions/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/descriptions/tests/snapshots/demo-extend.test.ts.snap
@ -40,6 +40,10 @@ exports[`renders ./components/descriptions/demo/basic.md extend context correctl
              </span>
            </div>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -59,6 +63,10 @@ exports[`renders ./components/descriptions/demo/basic.md extend context correctl
              </span>
            </div>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -101,9 +109,13 @@ exports[`renders ./components/descriptions/demo/basic.md extend context correctl
              </span>
            </div>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item"
-            colspan="2"
+            colspan="1"
          >
            <div
              class="ant-descriptions-item-container"
@ -164,6 +176,10 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
              Cloud Database
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -180,6 +196,10 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
              Prepaid
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -216,6 +236,10 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
              2018-04-24 18:00:00
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -226,7 +250,7 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="3"
+            colspan="1"
          >
            <span>
              2019-04-24 18:00:00
@ -246,7 +270,7 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="5"
+            colspan="1"
          >
            <span>
              <span
@ -283,6 +307,10 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
              $80.00
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -299,6 +327,10 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
              $20.00
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -329,7 +361,7 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="5"
+            colspan="1"
          >
            <span>
              Data disk type: MongoDB
@ -391,6 +423,10 @@ exports[`renders ./components/descriptions/demo/responsive.md extend context cor
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -407,6 +443,10 @@ exports[`renders ./components/descriptions/demo/responsive.md extend context cor
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -443,6 +483,10 @@ exports[`renders ./components/descriptions/demo/responsive.md extend context cor
                $80.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -459,6 +503,10 @@ exports[`renders ./components/descriptions/demo/responsive.md extend context cor
                $20.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -489,7 +537,7 @@ exports[`renders ./components/descriptions/demo/responsive.md extend context cor
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="5"
+              colspan="1"
            >
              <span>
                Data disk type: MongoDB
@ -627,6 +675,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -643,6 +695,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -679,6 +735,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                $80.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -695,6 +755,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                $20.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -725,7 +789,7 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="5"
+              colspan="1"
            >
              <span>
                Data disk type: MongoDB
@ -800,6 +864,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -819,6 +887,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -861,6 +933,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -880,6 +956,10 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -998,7 +1078,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red"
+              style="background: red;"
            >
              <span>
                Product
@ -1007,12 +1087,16 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green"
+              style="background: green;"
            >
              <span>
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -1029,6 +1113,10 @@ Array [
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -1077,7 +1165,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red"
+              style="background: red;"
            >
              <span>
                Product
@ -1086,16 +1174,20 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green"
+              style="background: green;"
            >
              <span>
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red"
+              style="background: red;"
            >
              <span>
                Billing Mode
@ -1104,16 +1196,20 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green"
+              style="background: green;"
            >
              <span>
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red;color:orange"
+              style="background: red; color: orange;"
            >
              <span>
                Automatic Renewal
@ -1122,7 +1218,7 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green;color:blue"
+              style="background: green; color: blue;"
            >
              <span>
                YES
@ -1187,7 +1283,7 @@ exports[`renders ./components/descriptions/demo/text.md extend context correctly
                class="ant-descriptions-item-label"
              >
                <div
-                  style="display:flex"
+                  style="display: flex;"
                >
                  Billing Mode
                </div>
@ -1450,7 +1546,7 @@ exports[`renders ./components/descriptions/demo/text.md extend context correctly
                            class="ant-table-content"
                          >
                            <table
-                              style="table-layout:auto"
+                              style="table-layout: auto;"
                            >
                              <colgroup />
                              <thead
@ -1570,6 +1666,28 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
              </span>
            </div>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Zhou Maomao
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item"
            colspan="1"
@ -1584,6 +1702,28 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
              </span>
            </div>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-content"
+              >
+                1810000000
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item"
            colspan="1"
@ -1602,34 +1742,6 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
        <tr
          class="ant-descriptions-row"
        >
-          <td
-            class="ant-descriptions-item"
-            colspan="1"
-          >
-            <div
-              class="ant-descriptions-item-container"
-            >
-              <span
-                class="ant-descriptions-item-content"
-              >
-                Zhou Maomao
-              </span>
-            </div>
-          </td>
-          <td
-            class="ant-descriptions-item"
-            colspan="1"
-          >
-            <div
-              class="ant-descriptions-item-container"
-            >
-              <span
-                class="ant-descriptions-item-content"
-              >
-                1810000000
-              </span>
-            </div>
-          </td>
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -1650,7 +1762,7 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
        >
          <th
            class="ant-descriptions-item"
-            colspan="2"
+            colspan="1"
          >
            <div
              class="ant-descriptions-item-container"
@ -1662,6 +1774,28 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
              </span>
            </div>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-content"
+              >
+                No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item"
            colspan="1"
@ -1680,20 +1814,6 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
        <tr
          class="ant-descriptions-row"
        >
-          <td
-            class="ant-descriptions-item"
-            colspan="2"
-          >
-            <div
-              class="ant-descriptions-item-container"
-            >
-              <span
-                class="ant-descriptions-item-content"
-              >
-                No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
-              </span>
-            </div>
-          </td>
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -1744,22 +1864,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Product
            </span>
          </th>
-          <th
-            class="ant-descriptions-item-label"
-            colspan="1"
-          >
-            <span>
-              Billing Mode
-            </span>
-          </th>
-          <th
-            class="ant-descriptions-item-label"
-            colspan="1"
-          >
-            <span>
-              Automatic Renewal
-            </span>
-          </th>
        </tr>
        <tr
          class="ant-descriptions-row"
@ -1772,6 +1876,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Cloud Database
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <th
+            class="ant-descriptions-item-label"
+            colspan="1"
+          >
+            <span>
+              Billing Mode
+            </span>
+          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1780,6 +1900,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Prepaid
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <th
+            class="ant-descriptions-item-label"
+            colspan="1"
+          >
+            <span>
+              Automatic Renewal
+            </span>
+          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1800,9 +1936,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Order time
            </span>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              2018-04-24 18:00:00
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
-            colspan="2"
+            colspan="1"
          >
            <span>
              Usage Time
@ -1815,14 +1967,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
          <td
            class="ant-descriptions-item-content"
            colspan="1"
-          >
-            <span>
-              2018-04-24 18:00:00
-            </span>
-          </td>
-          <td
-            class="ant-descriptions-item-content"
-            colspan="2"
          >
            <span>
              2019-04-24 18:00:00
@ -1834,7 +1978,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="3"
+            colspan="1"
          >
            <span>
              Status
@ -1846,7 +1990,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="3"
+            colspan="1"
          >
            <span>
              <span
@ -1875,6 +2019,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Negotiated Amount
            </span>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              $80.00
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1883,6 +2043,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Discount
            </span>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              $20.00
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1895,22 +2071,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        <tr
          class="ant-descriptions-row"
        >
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              $80.00
-            </span>
-          </td>
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              $20.00
-            </span>
-          </td>
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1925,7 +2085,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="3"
+            colspan="1"
          >
            <span>
              Config Info
@ -1937,7 +2097,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="3"
+            colspan="1"
          >
            <span>
              Data disk type: MongoDB
--- a/components/descriptions/tests/snapshots/demo.test.ts.snap
+++ b/components/descriptions/tests/snapshots/demo.test.ts.snap
@ -40,6 +40,10 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
              </span>
            </div>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -59,6 +63,10 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
              </span>
            </div>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -101,9 +109,13 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
              </span>
            </div>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item"
-            colspan="2"
+            colspan="1"
          >
            <div
              class="ant-descriptions-item-container"
@ -164,6 +176,10 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
              Cloud Database
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -180,6 +196,10 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
              Prepaid
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -216,6 +236,10 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
              2018-04-24 18:00:00
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -226,7 +250,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="3"
+            colspan="1"
          >
            <span>
              2019-04-24 18:00:00
@ -246,7 +270,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="5"
+            colspan="1"
          >
            <span>
              <span
@ -283,6 +307,10 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
              $80.00
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -299,6 +327,10 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
              $20.00
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -329,7 +361,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="5"
+            colspan="1"
          >
            <span>
              Data disk type: MongoDB
@ -391,6 +423,10 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -407,6 +443,10 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -443,6 +483,10 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
                $80.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -459,6 +503,10 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
                $20.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -489,7 +537,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="5"
+              colspan="1"
            >
              <span>
                Data disk type: MongoDB
@ -627,6 +675,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -643,6 +695,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -679,6 +735,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                $80.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -695,6 +755,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                $20.00
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -725,7 +789,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="5"
+              colspan="1"
            >
              <span>
                Data disk type: MongoDB
@ -800,6 +864,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -819,6 +887,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -861,6 +933,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -880,6 +956,10 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
                </span>
              </div>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <td
              class="ant-descriptions-item"
              colspan="1"
@ -998,7 +1078,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red"
+              style="background: red;"
            >
              <span>
                Product
@ -1007,12 +1087,16 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green"
+              style="background: green;"
            >
              <span>
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -1029,6 +1113,10 @@ Array [
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -1077,7 +1165,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red"
+              style="background: red;"
            >
              <span>
                Product
@ -1086,16 +1174,20 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green"
+              style="background: green;"
            >
              <span>
                Cloud Database
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red"
+              style="background: red;"
            >
              <span>
                Billing Mode
@ -1104,16 +1196,20 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green"
+              style="background: green;"
            >
              <span>
                Prepaid
              </span>
            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background:red;color:orange"
+              style="background: red; color: orange;"
            >
              <span>
                Automatic Renewal
@ -1122,7 +1218,7 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background:green;color:blue"
+              style="background: green; color: blue;"
            >
              <span>
                YES
@ -1187,7 +1283,7 @@ exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
                class="ant-descriptions-item-label"
              >
                <div
-                  style="display:flex"
+                  style="display: flex;"
                >
                  Billing Mode
                </div>
@ -1450,7 +1546,7 @@ exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
                            class="ant-table-content"
                          >
                            <table
-                              style="table-layout:auto"
+                              style="table-layout: auto;"
                            >
                              <colgroup />
                              <thead
@ -1570,6 +1666,28 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
              </span>
            </div>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Zhou Maomao
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item"
            colspan="1"
@ -1584,6 +1702,28 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
              </span>
            </div>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-content"
+              >
+                1810000000
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item"
            colspan="1"
@ -1602,34 +1742,6 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
        <tr
          class="ant-descriptions-row"
        >
-          <td
-            class="ant-descriptions-item"
-            colspan="1"
-          >
-            <div
-              class="ant-descriptions-item-container"
-            >
-              <span
-                class="ant-descriptions-item-content"
-              >
-                Zhou Maomao
-              </span>
-            </div>
-          </td>
-          <td
-            class="ant-descriptions-item"
-            colspan="1"
-          >
-            <div
-              class="ant-descriptions-item-container"
-            >
-              <span
-                class="ant-descriptions-item-content"
-              >
-                1810000000
-              </span>
-            </div>
-          </td>
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -1650,7 +1762,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
        >
          <th
            class="ant-descriptions-item"
-            colspan="2"
+            colspan="1"
          >
            <div
              class="ant-descriptions-item-container"
@ -1662,6 +1774,28 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
              </span>
            </div>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-content"
+              >
+                No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item"
            colspan="1"
@ -1680,20 +1814,6 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
        <tr
          class="ant-descriptions-row"
        >
-          <td
-            class="ant-descriptions-item"
-            colspan="2"
-          >
-            <div
-              class="ant-descriptions-item-container"
-            >
-              <span
-                class="ant-descriptions-item-content"
-              >
-                No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
-              </span>
-            </div>
-          </td>
          <td
            class="ant-descriptions-item"
            colspan="1"
@ -1744,22 +1864,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Product
            </span>
          </th>
-          <th
-            class="ant-descriptions-item-label"
-            colspan="1"
-          >
-            <span>
-              Billing Mode
-            </span>
-          </th>
-          <th
-            class="ant-descriptions-item-label"
-            colspan="1"
-          >
-            <span>
-              Automatic Renewal
-            </span>
-          </th>
        </tr>
        <tr
          class="ant-descriptions-row"
@ -1772,6 +1876,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Cloud Database
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <th
+            class="ant-descriptions-item-label"
+            colspan="1"
+          >
+            <span>
+              Billing Mode
+            </span>
+          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1780,6 +1900,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Prepaid
            </span>
          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <th
+            class="ant-descriptions-item-label"
+            colspan="1"
+          >
+            <span>
+              Automatic Renewal
+            </span>
+          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1800,9 +1936,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Order time
            </span>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              2018-04-24 18:00:00
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
-            colspan="2"
+            colspan="1"
          >
            <span>
              Usage Time
@ -1815,14 +1967,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
          <td
            class="ant-descriptions-item-content"
            colspan="1"
-          >
-            <span>
-              2018-04-24 18:00:00
-            </span>
-          </td>
-          <td
-            class="ant-descriptions-item-content"
-            colspan="2"
          >
            <span>
              2019-04-24 18:00:00
@ -1834,7 +1978,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="3"
+            colspan="1"
          >
            <span>
              Status
@ -1846,7 +1990,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="3"
+            colspan="1"
          >
            <span>
              <span
@ -1875,6 +2019,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Negotiated Amount
            </span>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              $80.00
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1883,6 +2043,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Discount
            </span>
          </th>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              $20.00
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1895,22 +2071,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        <tr
          class="ant-descriptions-row"
        >
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              $80.00
-            </span>
-          </td>
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              $20.00
-            </span>
-          </td>
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1925,7 +2085,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="3"
+            colspan="1"
          >
            <span>
              Config Info
@ -1937,7 +2097,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="3"
+            colspan="1"
          >
            <span>
              Data disk type: MongoDB
--- a/components/divider/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/divider/tests/snapshots/demo-extend.test.ts.snap
@ -5,17 +5,17 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal"
    role="separator"
-    style="border-width:2px;border-color:#7cb305"
+    style="border-width: 2px; border-color: #7cb305;"
  />,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-dashed"
    role="separator"
-    style="border-color:#7cb305"
+    style="border-color: #7cb305;"
  />,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-dashed"
    role="separator"
-    style="border-color:#7cb305"
+    style="border-color: #7cb305;"
  >
    <span
      class="ant-divider-inner-text"
@ -26,12 +26,12 @@ Array [
  <div
    class="ant-divider ant-divider-vertical"
    role="separator"
-    style="height:60px;border-color:#7cb305"
+    style="height: 60px; border-color: #7cb305;"
  />,
  <div
    class="ant-divider ant-divider-vertical ant-divider-dashed"
    role="separator"
-    style="height:60px;border-color:#7cb305"
+    style="height: 60px; border-color: #7cb305;"
  />,
 ]
 `;
@ -107,7 +107,6 @@ Array [

 exports[`renders ./components/divider/demo/vertical.md extend context correctly 1`] = `
 Array [
-  "Text",
  <div
    class="ant-divider ant-divider-vertical"
    role="separator"
@ -179,7 +178,7 @@ Array [
  >
    <span
      class="ant-divider-inner-text"
-      style="margin-left:0"
+      style="margin-left: 0px;"
    >
      Left Text with 0 orientationMargin
    </span>
@ -193,7 +192,7 @@ Array [
  >
    <span
      class="ant-divider-inner-text"
-      style="margin-right:50px"
+      style="margin-right: 50px;"
    >
      Right Text with 50px orientationMargin
    </span>
--- a/components/divider/tests/snapshots/demo.test.ts.snap
+++ b/components/divider/tests/snapshots/demo.test.ts.snap
@ -5,17 +5,17 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal"
    role="separator"
-    style="border-width:2px;border-color:#7cb305"
+    style="border-width: 2px; border-color: #7cb305;"
  />,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-dashed"
    role="separator"
-    style="border-color:#7cb305"
+    style="border-color: #7cb305;"
  />,
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-dashed"
    role="separator"
-    style="border-color:#7cb305"
+    style="border-color: #7cb305;"
  >
    <span
      class="ant-divider-inner-text"
@ -26,12 +26,12 @@ Array [
  <div
    class="ant-divider ant-divider-vertical"
    role="separator"
-    style="height:60px;border-color:#7cb305"
+    style="height: 60px; border-color: #7cb305;"
  />,
  <div
    class="ant-divider ant-divider-vertical ant-divider-dashed"
    role="separator"
-    style="height:60px;border-color:#7cb305"
+    style="height: 60px; border-color: #7cb305;"
  />,
 ]
 `;
@ -107,7 +107,6 @@ Array [

 exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
 Array [
-  "Text",
  <div
    class="ant-divider ant-divider-vertical"
    role="separator"
@ -179,7 +178,7 @@ Array [
  >
    <span
      class="ant-divider-inner-text"
-      style="margin-left:0"
+      style="margin-left: 0px;"
    >
      Left Text with 0 orientationMargin
    </span>
@ -193,7 +192,7 @@ Array [
  >
    <span
      class="ant-divider-inner-text"
-      style="margin-right:50px"
+      style="margin-right: 50px;"
    >
      Right Text with 50px orientationMargin
    </span>
--- a/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders ./components/drawer/demo/basic-right.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <button
    class="ant-btn ant-btn-primary"
    type="button"
@ -202,7 +202,7 @@ exports[`renders ./components/drawer/demo/config-provider.md extend context corr
 `;

 exports[`renders ./components/drawer/demo/extra.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
  >
@ -428,7 +428,7 @@ HTMLCollection [
 `;

 exports[`renders ./components/drawer/demo/form-in-drawer.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <button
    class="ant-btn ant-btn-primary"
    type="button"
@ -722,7 +722,7 @@ HTMLCollection [
                                  class="ant-select-selection-search"
                                >
                                  <input
-                                    aria-activedescendant="owner_list_0"
+                                    aria-activedescendant="owner_list_test"
                                    aria-autocomplete="list"
                                    aria-controls="owner_list"
                                    aria-haspopup="listbox"
@ -759,7 +759,7 @@ HTMLCollection [
                                      <div
                                        aria-label="Xiaoxiao Fu"
                                        aria-selected="false"
-                                        id="owner_list_0"
+                                        id="owner_list_test"
                                        role="option"
                                      >
                                        xiao
@ -767,7 +767,7 @@ HTMLCollection [
                                      <div
                                        aria-label="Maomao Zhou"
                                        aria-selected="false"
-                                        id="owner_list_1"
+                                        id="owner_list_test"
                                        role="option"
                                      >
                                        mao
@ -901,7 +901,7 @@ HTMLCollection [
                                  class="ant-select-selection-search"
                                >
                                  <input
-                                    aria-activedescendant="type_list_0"
+                                    aria-activedescendant="type_list_test"
                                    aria-autocomplete="list"
                                    aria-controls="type_list"
                                    aria-haspopup="listbox"
@ -938,7 +938,7 @@ HTMLCollection [
                                      <div
                                        aria-label="Private"
                                        aria-selected="false"
-                                        id="type_list_0"
+                                        id="type_list_test"
                                        role="option"
                                      >
                                        private
@ -946,7 +946,7 @@ HTMLCollection [
                                      <div
                                        aria-label="Public"
                                        aria-selected="false"
-                                        id="type_list_1"
+                                        id="type_list_test"
                                        role="option"
                                      >
                                        public
@ -1085,7 +1085,7 @@ HTMLCollection [
                                  class="ant-select-selection-search"
                                >
                                  <input
-                                    aria-activedescendant="approver_list_0"
+                                    aria-activedescendant="approver_list_test"
                                    aria-autocomplete="list"
                                    aria-controls="approver_list"
                                    aria-haspopup="listbox"
@ -1122,7 +1122,7 @@ HTMLCollection [
                                      <div
                                        aria-label="Jack Ma"
                                        aria-selected="false"
-                                        id="approver_list_0"
+                                        id="approver_list_test"
                                        role="option"
                                      >
                                        jack
@ -1130,7 +1130,7 @@ HTMLCollection [
                                      <div
                                        aria-label="Tom Liu"
                                        aria-selected="false"
-                                        id="approver_list_1"
+                                        id="approver_list_test"
                                        role="option"
                                      >
                                        tom
@ -2508,7 +2508,7 @@ HTMLCollection [
 `;

 exports[`renders ./components/drawer/demo/multi-level-drawer.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <button
    class="ant-btn ant-btn-primary"
    type="button"
@ -2634,7 +2634,7 @@ HTMLCollection [
 `;

 exports[`renders ./components/drawer/demo/no-mask.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <button
    class="ant-btn ant-btn-primary"
    type="button"
@ -2730,7 +2730,7 @@ HTMLCollection [
 `;

 exports[`renders ./components/drawer/demo/placement.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
  >
@ -2974,7 +2974,7 @@ exports[`renders ./components/drawer/demo/render-in-current.md extend context co
 `;

 exports[`renders ./components/drawer/demo/size.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <div
    class="ant-space ant-space-horizontal ant-space-align-center"
  >
@ -3127,7 +3127,7 @@ HTMLCollection [
 `;

 exports[`renders ./components/drawer/demo/user-profile.md extend context correctly 1`] = `
-HTMLCollection [
+Array [
  <div
    class="ant-list ant-list-split ant-list-bordered"
  >
--- a/components/drawer/tests/snapshots/demo.test.ts.snap
+++ b/components/drawer/tests/snapshots/demo.test.ts.snap
@ -32,7 +32,7 @@ exports[`renders ./components/drawer/demo/extra.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-radio-group ant-radio-group-outline"
@ -150,7 +150,9 @@ exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
      viewBox="64 64 896 896"
      width="1em"
    >
-      <defs />
+      <defs>
+        <style />
+      </defs>
      <path
        d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
      />
@ -193,7 +195,7 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-radio-group ant-radio-group-outline"
@ -298,7 +300,7 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
 >
  Render in this
  <div
-    style="margin-top:16px"
+    style="margin-top: 16px;"
  >
    <button
      class="ant-btn ant-btn-primary"
@ -311,19 +313,19 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
  </div>
  <div
    class="ant-drawer ant-drawer-right ant-drawer-inline"
-    style="position:absolute"
+    style="position: absolute;"
    tabindex="-1"
  >
    <div
      aria-hidden="true"
      data-sentinel="start"
-      style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
      tabindex="0"
    />
    <div
      aria-hidden="true"
      data-sentinel="end"
-      style="width:0;height:0;overflow:hidden;outline:none;position:absolute"
+      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
      tabindex="0"
    />
  </div>
@ -336,7 +338,7 @@ exports[`renders ./components/drawer/demo/size.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <button
      class="ant-btn ant-btn-primary"
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -45,7 +45,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |  |
 | size | presetted size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | title | The title for Drawer | ReactNode | - |  |
-| open | Whether the Drawer dialog is visible or not | boolean | false | 4.23.0 |
+| open | Whether the Drawer dialog is visible or not. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | false | 4.23.0 |
 | width | Width of the Drawer dialog | string \| number | 378 |  |
 | zIndex | The `z-index` of the Drawer | number | 1000 |  |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |  |
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -44,7 +44,7 @@ cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!600000000168
 | size | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
 | title | 标题 | ReactNode | - |  |
-| open | Drawer 是否可见 | boolean | - | 4.23.0 |
+| open | Drawer 是否可见，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
 | width | 宽度 | string \| number | 378 |  |
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
 | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
--- a/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
--- a/components/dropdown/tests/snapshots/demo.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo.test.ts.snap
@ -117,7 +117,7 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Hover me
    </div>
@ -151,7 +151,7 @@ exports[`renders ./components/dropdown/demo/basic.md correctly 1`] = `
 exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
 <div
  class="ant-dropdown-trigger site-dropdown-context-menu"
-  style="text-align:center;height:200px;line-height:200px"
+  style="text-align: center; height: 200px; line-height: 200px;"
 >
  Right Click on here
 </div>
@ -160,11 +160,11 @@ exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
 exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center"
-  style="flex-wrap:wrap;margin-bottom:-8px"
+  style="flex-wrap: wrap; margin-bottom: -8px;"
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
+    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-dropdown-button"
@ -205,7 +205,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
+    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-dropdown-button"
@ -246,7 +246,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
+    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-dropdown-button"
@ -289,7 +289,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
+    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-dropdown-button"
@ -334,7 +334,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
+    style="margin-right: 8px; padding-bottom: 8px;"
  >
    <button
      class="ant-btn ant-btn-default ant-dropdown-trigger"
@ -345,7 +345,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
      >
        <div
          class="ant-space-item"
-          style="margin-right:8px"
+          style="margin-right: 8px;"
        >
          Button
        </div>
@ -377,7 +377,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="padding-bottom:8px"
+    style="padding-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-dropdown-button"
@ -428,7 +428,7 @@ exports[`renders ./components/dropdown/demo/event.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Hover me, Click menu item
    </div>
@ -468,7 +468,7 @@ exports[`renders ./components/dropdown/demo/item.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Hover me
    </div>
@ -505,7 +505,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-dropdown-button"
@ -516,10 +516,11 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
      >
        <span
          class="ant-btn-loading-icon"
+          style="width: 0px; opacity: 0; transform: scale(0);"
        >
          <span
            aria-label="loading"
-            class="anticon anticon-loading anticon-spin"
+            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
            role="img"
          >
            <svg
@ -569,7 +570,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-btn-group-sm ant-dropdown-button"
@ -580,10 +581,11 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
      >
        <span
          class="ant-btn-loading-icon"
+          style="width: 0px; opacity: 0; transform: scale(0);"
        >
          <span
            aria-label="loading"
-            class="anticon anticon-loading anticon-spin"
+            class="anticon anticon-loading anticon-spin ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
            role="img"
          >
            <svg
@ -633,7 +635,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-btn-group ant-dropdown-button"
@ -724,7 +726,7 @@ exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Hover to check menu style
    </div>
@ -764,7 +766,7 @@ exports[`renders ./components/dropdown/demo/overlay-open.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Hover me
    </div>
@ -801,15 +803,15 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-center"
-      style="flex-wrap:wrap;margin-bottom:-8px"
+      style="flex-wrap: wrap; margin-bottom: -8px;"
    >
      <div
        class="ant-space-item"
-        style="margin-right:8px;padding-bottom:8px"
+        style="margin-right: 8px; padding-bottom: 8px;"
      >
        <button
          class="ant-btn ant-btn-default ant-dropdown-trigger"
@ -822,7 +824,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
      </div>
      <div
        class="ant-space-item"
-        style="margin-right:8px;padding-bottom:8px"
+        style="margin-right: 8px; padding-bottom: 8px;"
      >
        <button
          class="ant-btn ant-btn-default ant-dropdown-trigger"
@ -835,7 +837,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
      </div>
      <div
        class="ant-space-item"
-        style="padding-bottom:8px"
+        style="padding-bottom: 8px;"
      >
        <button
          class="ant-btn ant-btn-default ant-dropdown-trigger"
@ -853,11 +855,11 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
  >
    <div
      class="ant-space ant-space-horizontal ant-space-align-center"
-      style="flex-wrap:wrap;margin-bottom:-8px"
+      style="flex-wrap: wrap; margin-bottom: -8px;"
    >
      <div
        class="ant-space-item"
-        style="margin-right:8px;padding-bottom:8px"
+        style="margin-right: 8px; padding-bottom: 8px;"
      >
        <button
          class="ant-btn ant-btn-default ant-dropdown-trigger"
@ -870,7 +872,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
      </div>
      <div
        class="ant-space-item"
-        style="margin-right:8px;padding-bottom:8px"
+        style="margin-right: 8px; padding-bottom: 8px;"
      >
        <button
          class="ant-btn ant-btn-default ant-dropdown-trigger"
@ -883,7 +885,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
      </div>
      <div
        class="ant-space-item"
-        style="padding-bottom:8px"
+        style="padding-bottom: 8px;"
      >
        <button
          class="ant-btn ant-btn-default ant-dropdown-trigger"
@ -908,7 +910,7 @@ exports[`renders ./components/dropdown/demo/selectable.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Selectable
    </div>
@ -948,7 +950,7 @@ exports[`renders ./components/dropdown/demo/sub-menu.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Cascading menu
    </div>
@ -988,7 +990,7 @@ exports[`renders ./components/dropdown/demo/trigger.md correctly 1`] = `
  >
    <div
      class="ant-space-item"
-      style="margin-right:8px"
+      style="margin-right: 8px;"
    >
      Click me
    </div>
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@ -27,8 +27,8 @@ When there are more than a few options to choose from, you can wrap them in a `D
 | overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
 | placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
-| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean) => void | - | 4.23.0 |
+| open | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open)) | boolean | - | 4.23.0 |
+| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item. Use `onVisibleChange` under 4.23.0 ([why?](/docs/react/faq#why-open)) | (open: boolean) => void | - | 4.23.0 |

 You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.

--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| open | 菜单是否显示 | boolean | - | 4.23.0 |
-| onOpenChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (open: boolean) => void | - | 4.23.0 |
+| open | 菜单是否显示，小于 4.23.0 使用 `visible`（[为什么?](/docs/react/faq#why-open)） | boolean | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（[为什么?](/docs/react/faq#why-open)） | (open: boolean) => void | - | 4.23.0 |

 `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。

@ -56,4 +56,4 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | open | 菜单是否显示 | boolean | - | 4.23.0 |
 | onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - |  |
-| onOpenChange | 菜单显示状态改变时调用，参数为 `visible` | (open: boolean) => void | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用 | (open: boolean) => void | - | 4.23.0 |
--- a/components/empty/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/empty/tests/snapshots/demo-extend.test.ts.snap
@ -104,7 +104,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
    </h4>
    <div
      class="ant-select ant-select-single ant-select-show-arrow"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -113,16 +113,17 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_-test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -134,13 +135,13 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      </div>
      <div>
        <div
-          class="ant-select-dropdown ant-select-dropdown-empty"
-          style="opacity:0"
+          class="ant-select-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
        >
          <div>
            <div
              class="ant-select-item-empty"
-              id="undefined_list"
+              id="rc_select_test_list"
              role="listbox"
            >
              <div
@ -196,7 +197,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -225,7 +226,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
    </h4>
    <div
      class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -235,14 +236,15 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -254,8 +256,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      </div>
      <div>
        <div
-          class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
-          style="opacity:0"
+          class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
        >
          <div>
            <div
@ -315,7 +317,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -344,7 +346,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
    </h4>
    <div
      class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -354,11 +356,12 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -370,8 +373,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      </div>
      <div>
        <div
-          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty"
-          style="opacity:0"
+          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+          style="opacity: 0;"
        >
          <div>
            <div
@ -446,7 +449,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -491,6 +494,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              <input
                class="ant-checkbox-input"
                type="checkbox"
+                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -518,8 +522,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          </span>
          <div>
            <div
-              class="ant-dropdown"
-              style="opacity:0"
+              class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+              style="opacity: 0;"
            >
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -529,6 +533,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              >
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                  data-menu-id="rc-menu-uuid-test-selectAll"
                  role="menuitem"
                  tabindex="-1"
                >
@ -540,8 +545,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -562,6 +567,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </div>
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                  data-menu-id="rc-menu-uuid-test-selectInvert"
                  role="menuitem"
                  tabindex="-1"
                >
@ -573,8 +579,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -596,12 +602,12 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              </ul>
              <div
                aria-hidden="true"
-                style="display:none"
+                style="display: none;"
              >
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -622,8 +628,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </div>
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -648,7 +654,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          <span
            class="ant-transfer-list-header-selected"
          >
-            0 item
+            0
+            item
          </span>
          <span
            class="ant-transfer-list-header-title"
@ -778,6 +785,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              <input
                class="ant-checkbox-input"
                type="checkbox"
+                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -805,8 +813,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          </span>
          <div>
            <div
-              class="ant-dropdown"
-              style="opacity:0"
+              class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+              style="opacity: 0;"
            >
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -816,6 +824,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              >
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                  data-menu-id="rc-menu-uuid-test-selectAll"
                  role="menuitem"
                  tabindex="-1"
                >
@ -827,8 +836,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -849,6 +858,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </div>
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+                  data-menu-id="rc-menu-uuid-test-selectInvert"
                  role="menuitem"
                  tabindex="-1"
                >
@ -860,8 +870,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -883,12 +893,12 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              </ul>
              <div
                aria-hidden="true"
-                style="display:none"
+                style="display: none;"
              >
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -909,8 +919,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </div>
                <div>
                  <div
-                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-                    style="opacity:0"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
+                    style="opacity: 0;"
                  >
                    <div
                      class="ant-tooltip-content"
@ -935,7 +945,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          <span
            class="ant-transfer-list-header-selected"
          >
-            0 item
+            0
+            item
          </span>
          <span
            class="ant-transfer-list-header-title"
@ -1002,7 +1013,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
    </h4>
    <div
      class="ant-table-wrapper"
-      style="margin-top:8px"
+      style="margin-top: 8px;"
    >
      <div
        class="ant-spin-nested-loading"
@ -1020,7 +1031,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                class="ant-table-content"
              >
                <table
-                  style="table-layout:auto"
+                  style="table-layout: auto;"
                >
                  <colgroup />
                  <thead
@ -1180,7 +1191,7 @@ exports[`renders ./components/empty/demo/customize.md extend context correctly 1
 >
  <div
    class="ant-empty-image"
-    style="height:60px"
+    style="height: 60px;"
  >
    <img
      alt="empty"
--- a/components/empty/tests/snapshots/demo.test.ts.snap
+++ b/components/empty/tests/snapshots/demo.test.ts.snap
@ -104,7 +104,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
    </h4>
    <div
      class="ant-select ant-select-single ant-select-show-arrow"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -113,16 +113,17 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="undefined_list_0"
+            aria-activedescendant="rc_select_test_list_test"
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -135,7 +136,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -164,7 +165,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
    </h4>
    <div
      class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -174,14 +175,15 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            readonly=""
            role="combobox"
-            style="opacity:0"
+            style="opacity: 0;"
            type="search"
            unselectable="on"
            value=""
@ -194,7 +196,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -223,7 +225,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
    </h4>
    <div
      class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
-      style="width:200px"
+      style="width: 200px;"
    >
      <div
        class="ant-select-selector"
@ -233,11 +235,12 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
        >
          <input
            aria-autocomplete="list"
-            aria-controls="undefined_list"
+            aria-controls="rc_select_test_list"
            aria-haspopup="listbox"
-            aria-owns="undefined_list"
+            aria-owns="rc_select_test_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
+            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -250,7 +253,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select:none;-webkit-user-select:none"
+        style="user-select: none;"
        unselectable="on"
      >
        <span
@ -295,6 +298,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
              <input
                class="ant-checkbox-input"
                type="checkbox"
+                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -323,7 +327,8 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
          <span
            class="ant-transfer-list-header-selected"
          >
-            0 item
+            0
+            item
          </span>
          <span
            class="ant-transfer-list-header-title"
@ -453,6 +458,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
              <input
                class="ant-checkbox-input"
                type="checkbox"
+                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -481,7 +487,8 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
          <span
            class="ant-transfer-list-header-selected"
          >
-            0 item
+            0
+            item
          </span>
          <span
            class="ant-transfer-list-header-title"
@ -548,7 +555,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
    </h4>
    <div
      class="ant-table-wrapper"
-      style="margin-top:8px"
+      style="margin-top: 8px;"
    >
      <div
        class="ant-spin-nested-loading"
@ -566,7 +573,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
                class="ant-table-content"
              >
                <table
-                  style="table-layout:auto"
+                  style="table-layout: auto;"
                >
                  <colgroup />
                  <thead
@ -726,7 +733,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
 >
  <div
    class="ant-empty-image"
-    style="height:60px"
+    style="height: 60px;"
  >
    <img
      alt="empty"
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
--- a/components/form/tests/snapshots/demo.test.ts.snap
+++ b/components/form/tests/snapshots/demo.test.ts.snap
--- a/components/form/tests/demo-extend.test.ts
+++ b/components/form/tests/demo-extend.test.ts
@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';

-extendTest('form', { skip: ['complex-form-control.md'] });
+extendTest('form', { skip: ['complex-form-control.md', 'dep-debug.md'] });
--- a/components/form/tests/demo.test.ts
+++ b/components/form/tests/demo.test.ts
@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';

-demoTest('form', { skip: ['complex-form-control.md'] });
+demoTest('form', { skip: ['complex-form-control.md', 'dep-debug.md'] });
--- a/components/grid/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/grid/tests/snapshots/demo-extend.test.ts.snap
@ -525,13 +525,13 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:2 2 auto"
+      style="flex: 2 2 auto;"
    >
      2 / 5
    </div>
    <div
      class="ant-col"
-      style="flex:3 3 auto"
+      style="flex: 3 3 auto;"
    >
      3 / 5
    </div>
@ -551,13 +551,13 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:0 0 100px"
+      style="flex: 0 0 100px;"
    >
      100px
    </div>
    <div
      class="ant-col"
-      style="flex:auto"
+      style="flex-basis: auto;"
    >
      Fill Rest
    </div>
@ -577,13 +577,13 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:1 1 200px"
+      style="flex: 1 1 200px;"
    >
      1 1 200px
    </div>
    <div
      class="ant-col"
-      style="flex:0 1 300px"
+      style="flex: 0 1 300px;"
    >
      0 1 300px
    </div>
@ -593,17 +593,17 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:none;min-width:0"
+      style="flex: 0 0 auto; min-width: 0;"
    >
      <div
-        style="padding:0 16px"
+        style="padding: 0px 16px;"
      >
        none
      </div>
    </div>
    <div
      class="ant-col"
-      style="flex:auto;min-width:0"
+      style="flex-basis: auto; min-width: 0;"
    >
      auto with no-wrap
    </div>
@ -625,44 +625,44 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px"
+    style="margin-left: -8px; margin-right: -8px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
@ -680,44 +680,44 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-16px;margin-right:-16px"
+    style="margin-left: -4px; margin-right: -4px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
@ -735,84 +735,84 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:-12px"
+    style="margin: -12px -8px -12px -8px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
@ -869,7 +869,7 @@ Array [
    Horizontal Gutter (px): 
  </span>,
  <div
-    style="width:50%"
+    style="width: 50%;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
@ -879,34 +879,34 @@ Array [
      />
      <div
        class="ant-slider-track"
-        style="left:0%;width:20%"
+        style="left: 0%; width: 20%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
@ -916,13 +916,13 @@ Array [
        aria-valuenow="1"
        class="ant-slider-handle"
        role="slider"
-        style="left:20%;transform:translateX(-50%)"
+        style="left: 20%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div>
        <div
-          class="ant-tooltip ant-slider-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -948,37 +948,37 @@ Array [
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        >
          16
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        >
          24
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        >
          32
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        >
          40
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        >
          48
        </span>
@ -989,7 +989,7 @@ Array [
    Vertical Gutter (px): 
  </span>,
  <div
-    style="width:50%"
+    style="width: 50%;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
@ -999,34 +999,34 @@ Array [
      />
      <div
        class="ant-slider-track"
-        style="left:0%;width:20%"
+        style="left: 0%; width: 20%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
@ -1036,13 +1036,13 @@ Array [
        aria-valuenow="1"
        class="ant-slider-handle"
        role="slider"
-        style="left:20%;transform:translateX(-50%)"
+        style="left: 20%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div>
        <div
-          class="ant-tooltip ant-slider-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1068,37 +1068,37 @@ Array [
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        >
          16
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        >
          24
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        >
          32
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        >
          40
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        >
          48
        </span>
@ -1109,7 +1109,7 @@ Array [
    Column Count:
  </span>,
  <div
-    style="width:50%;margin-bottom:48px"
+    style="width: 50%; margin-bottom: 48px;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
@ -1119,34 +1119,34 @@ Array [
      />
      <div
        class="ant-slider-track"
-        style="left:0%;width:40%"
+        style="left: 0%; width: 40%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
@ -1156,13 +1156,13 @@ Array [
        aria-valuenow="2"
        class="ant-slider-handle"
        role="slider"
-        style="left:40%;transform:translateX(-50%)"
+        style="left: 40%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div>
        <div
-          class="ant-tooltip ant-slider-tooltip"
-          style="opacity:0"
+          class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
+          style="opacity: 0;"
        >
          <div
            class="ant-tooltip-content"
@ -1188,37 +1188,37 @@ Array [
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        >
          2
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        >
          3
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        >
          4
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        >
          6
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        >
          12
        </span>
@ -1227,11 +1227,11 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
+    style="margin: -8px -8px -8px -8px;"
  >
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1239,7 +1239,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1247,7 +1247,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1255,7 +1255,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1263,7 +1263,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1271,7 +1271,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1279,7 +1279,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1287,21 +1287,20 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
      </div>
    </div>
  </div>,
-  "Another Row:",
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
+    style="margin: -8px -8px -8px -8px;"
  >
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1309,7 +1308,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1317,7 +1316,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1325,7 +1324,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1340,7 +1339,6 @@ Array [
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
-
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
@ -1421,4 +1419,10 @@ exports[`renders ./components/grid/demo/sort.md extend context correctly 1`] = `
 </div>
 `;

-exports[`renders ./components/grid/demo/useBreakpoint.md extend context correctly 1`] = `null`;
+exports[`renders ./components/grid/demo/useBreakpoint.md extend context correctly 1`] = `
+<span
+  class="ant-tag ant-tag-blue"
+>
+  xs
+</span>
+`;
--- a/components/grid/tests/snapshots/demo.test.ts.snap
+++ b/components/grid/tests/snapshots/demo.test.ts.snap
@ -525,13 +525,13 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:2 2 auto"
+      style="flex: 2 2 auto;"
    >
      2 / 5
    </div>
    <div
      class="ant-col"
-      style="flex:3 3 auto"
+      style="flex: 3 3 auto;"
    >
      3 / 5
    </div>
@ -551,13 +551,13 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:0 0 100px"
+      style="flex: 0 0 100px;"
    >
      100px
    </div>
    <div
      class="ant-col"
-      style="flex:auto"
+      style="flex-basis: auto;"
    >
      Fill Rest
    </div>
@ -577,13 +577,13 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:1 1 200px"
+      style="flex: 1 1 200px;"
    >
      1 1 200px
    </div>
    <div
      class="ant-col"
-      style="flex:0 1 300px"
+      style="flex: 0 1 300px;"
    >
      0 1 300px
    </div>
@ -593,17 +593,17 @@ Array [
  >
    <div
      class="ant-col"
-      style="flex:none;min-width:0"
+      style="flex: 0 0 auto; min-width: 0;"
    >
      <div
-        style="padding:0 16px"
+        style="padding: 0px 16px;"
      >
        none
      </div>
    </div>
    <div
      class="ant-col"
-      style="flex:auto;min-width:0"
+      style="flex-basis: auto; min-width: 0;"
    >
      auto with no-wrap
    </div>
@ -625,44 +625,44 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px"
+    style="margin-left: -8px; margin-right: -8px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px"
+      style="padding-left: 8px; padding-right: 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
@ -680,44 +680,44 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-16px;margin-right:-16px"
+    style="margin-left: -4px; margin-right: -4px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px"
+      style="padding-left: 4px; padding-right: 4px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
@ -735,84 +735,84 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:-12px"
+    style="margin: -12px -8px -12px -8px;"
  >
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
    </div>
    <div
      class="ant-col ant-col-6 gutter-row"
-      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+      style="padding: 12px 8px 12px 8px;"
    >
      <div
-        style="background:#0092ff;padding:8px 0"
+        style="background: rgb(0, 146, 255); padding: 8px 0px;"
      >
        col-6
      </div>
@ -869,7 +869,7 @@ Array [
    Horizontal Gutter (px): 
  </span>,
  <div
-    style="width:50%"
+    style="width: 50%;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
@ -879,34 +879,34 @@ Array [
      />
      <div
        class="ant-slider-track"
-        style="left:0%;width:20%"
+        style="left: 0%; width: 20%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
@ -916,7 +916,7 @@ Array [
        aria-valuenow="1"
        class="ant-slider-handle"
        role="slider"
-        style="left:20%;transform:translateX(-50%)"
+        style="left: 20%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div
@ -924,37 +924,37 @@ Array [
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        >
          16
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        >
          24
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        >
          32
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        >
          40
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        >
          48
        </span>
@ -965,7 +965,7 @@ Array [
    Vertical Gutter (px): 
  </span>,
  <div
-    style="width:50%"
+    style="width: 50%;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
@ -975,34 +975,34 @@ Array [
      />
      <div
        class="ant-slider-track"
-        style="left:0%;width:20%"
+        style="left: 0%; width: 20%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
@ -1012,7 +1012,7 @@ Array [
        aria-valuenow="1"
        class="ant-slider-handle"
        role="slider"
-        style="left:20%;transform:translateX(-50%)"
+        style="left: 20%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div
@ -1020,37 +1020,37 @@ Array [
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        >
          16
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        >
          24
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        >
          32
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        >
          40
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        >
          48
        </span>
@ -1061,7 +1061,7 @@ Array [
    Column Count:
  </span>,
  <div
-    style="width:50%;margin-bottom:48px"
+    style="width: 50%; margin-bottom: 48px;"
  >
    <div
      class="ant-slider ant-slider-horizontal ant-slider-with-marks"
@ -1071,34 +1071,34 @@ Array [
      />
      <div
        class="ant-slider-track"
-        style="left:0%;width:40%"
+        style="left: 0%; width: 40%;"
      />
      <div
        class="ant-slider-step"
      >
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot ant-slider-dot-active"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        />
        <span
          class="ant-slider-dot"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        />
      </div>
      <div
@ -1108,7 +1108,7 @@ Array [
        aria-valuenow="2"
        class="ant-slider-handle"
        role="slider"
-        style="left:40%;transform:translateX(-50%)"
+        style="left: 40%; transform: translateX(-50%);"
        tabindex="0"
      />
      <div
@ -1116,37 +1116,37 @@ Array [
      >
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:0%;transform:translateX(-50%)"
+          style="left: 0%; transform: translateX(-50%);"
        >
          2
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:20%;transform:translateX(-50%)"
+          style="left: 20%; transform: translateX(-50%);"
        >
          3
        </span>
        <span
          class="ant-slider-mark-text ant-slider-mark-text-active"
-          style="left:40%;transform:translateX(-50%)"
+          style="left: 40%; transform: translateX(-50%);"
        >
          4
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:60%;transform:translateX(-50%)"
+          style="left: 60%; transform: translateX(-50%);"
        >
          6
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:80%;transform:translateX(-50%)"
+          style="left: 80%; transform: translateX(-50%);"
        >
          8
        </span>
        <span
          class="ant-slider-mark-text"
-          style="left:100%;transform:translateX(-50%)"
+          style="left: 100%; transform: translateX(-50%);"
        >
          12
        </span>
@ -1155,11 +1155,11 @@ Array [
  </div>,
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
+    style="margin: -8px -8px -8px -8px;"
  >
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1167,7 +1167,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1175,7 +1175,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1183,7 +1183,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1191,7 +1191,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1199,7 +1199,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1207,7 +1207,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1215,21 +1215,20 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
      </div>
    </div>
  </div>,
-  "Another Row:",
  <div
    class="ant-row"
-    style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:-8px"
+    style="margin: -8px -8px -8px -8px;"
  >
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1237,7 +1236,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1245,7 +1244,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1253,7 +1252,7 @@ Array [
    </div>
    <div
      class="ant-col ant-col-6"
-      style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
+      style="padding: 8px 8px 8px 8px;"
    >
      <div>
        Column
@ -1268,7 +1267,6 @@ Array [
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
-
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
  &lt;Col span={6} /&gt;
@ -1349,4 +1347,10 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
 </div>
 `;

-exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `null`;
+exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
+<span
+  class="ant-tag ant-tag-blue"
+>
+  xs
+</span>
+`;
--- a/components/icon/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/icon/tests/snapshots/demo-extend.test.ts.snap
@ -6,7 +6,7 @@ exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] =
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="home"
@ -30,7 +30,7 @@ exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="setting"
@ -54,7 +54,7 @@ exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="smile"
@ -78,7 +78,7 @@ exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="sync"
@ -102,7 +102,7 @@ exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="smile"
@ -115,7 +115,7 @@ exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] =
        fill="currentColor"
        focusable="false"
        height="1em"
-        style="-ms-transform:rotate(180deg);transform:rotate(180deg)"
+        style="transform: rotate(180deg);"
        viewBox="64 64 896 896"
        width="1em"
      >
@ -157,12 +157,12 @@ exports[`renders ./components/icon/demo/custom.md extend context correctly 1`] =
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
      role="img"
-      style="color:hotpink"
+      style="color: hotpink;"
    >
      <svg
        fill="currentColor"
@ -178,12 +178,12 @@ exports[`renders ./components/icon/demo/custom.md extend context correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
      role="img"
-      style="font-size:32px"
+      style="font-size: 32px;"
    >
      <svg
        fill="currentColor"
@ -236,7 +236,7 @@ exports[`renders ./components/icon/demo/custom.md extend context correctly 1`] =
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -300,7 +300,7 @@ exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`]
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -315,14 +315,14 @@ exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`]
        width="1em"
      >
        <use
-          href="#icon-tuichu"
+          xlink:href="#icon-tuichu"
        />
      </svg>
    </span>
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -337,7 +337,7 @@ exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`]
        width="1em"
      >
        <use
-          href="#icon-facebook"
+          xlink:href="#icon-facebook"
        />
      </svg>
    </span>
@ -358,7 +358,7 @@ exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`]
        width="1em"
      >
        <use
-          href="#icon-twitter"
+          xlink:href="#icon-twitter"
        />
      </svg>
    </span>
@ -372,7 +372,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -387,14 +387,14 @@ exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`
        width="1em"
      >
        <use
-          href="#icon-javascript"
+          xlink:href="#icon-javascript"
        />
      </svg>
    </span>
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -409,14 +409,14 @@ exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`
        width="1em"
      >
        <use
-          href="#icon-java"
+          xlink:href="#icon-java"
        />
      </svg>
    </span>
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -431,7 +431,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`
        width="1em"
      >
        <use
-          href="#icon-shoppingcart"
+          xlink:href="#icon-shoppingcart"
        />
      </svg>
    </span>
@ -452,7 +452,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`
        width="1em"
      >
        <use
-          href="#icon-python"
+          xlink:href="#icon-python"
        />
      </svg>
    </span>
@ -466,7 +466,7 @@ exports[`renders ./components/icon/demo/two-tone.md extend context correctly 1`]
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="smile"
@ -499,7 +499,7 @@ exports[`renders ./components/icon/demo/two-tone.md extend context correctly 1`]
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="heart"
--- a/components/icon/tests/snapshots/demo.test.ts.snap
+++ b/components/icon/tests/snapshots/demo.test.ts.snap
@ -6,7 +6,7 @@ exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="home"
@ -30,7 +30,7 @@ exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="setting"
@ -54,7 +54,7 @@ exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="smile"
@ -78,7 +78,7 @@ exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="sync"
@ -102,7 +102,7 @@ exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="smile"
@ -115,7 +115,7 @@ exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
        fill="currentColor"
        focusable="false"
        height="1em"
-        style="-ms-transform:rotate(180deg);transform:rotate(180deg)"
+        style="transform: rotate(180deg);"
        viewBox="64 64 896 896"
        width="1em"
      >
@ -157,12 +157,12 @@ exports[`renders ./components/icon/demo/custom.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
      role="img"
-      style="color:hotpink"
+      style="color: hotpink;"
    >
      <svg
        fill="currentColor"
@ -178,12 +178,12 @@ exports[`renders ./components/icon/demo/custom.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
      role="img"
-      style="font-size:32px"
+      style="font-size: 32px;"
    >
      <svg
        fill="currentColor"
@ -236,7 +236,7 @@ exports[`renders ./components/icon/demo/custom.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -300,7 +300,7 @@ exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -315,14 +315,14 @@ exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = `
        width="1em"
      >
        <use
-          href="#icon-tuichu"
+          xlink:href="#icon-tuichu"
        />
      </svg>
    </span>
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -337,7 +337,7 @@ exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = `
        width="1em"
      >
        <use
-          href="#icon-facebook"
+          xlink:href="#icon-facebook"
        />
      </svg>
    </span>
@ -358,7 +358,7 @@ exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = `
        width="1em"
      >
        <use
-          href="#icon-twitter"
+          xlink:href="#icon-twitter"
        />
      </svg>
    </span>
@ -372,7 +372,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -387,14 +387,14 @@ exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
        width="1em"
      >
        <use
-          href="#icon-javascript"
+          xlink:href="#icon-javascript"
        />
      </svg>
    </span>
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -409,14 +409,14 @@ exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
        width="1em"
      >
        <use
-          href="#icon-java"
+          xlink:href="#icon-java"
        />
      </svg>
    </span>
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      class="anticon"
@ -431,7 +431,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
        width="1em"
      >
        <use
-          href="#icon-shoppingcart"
+          xlink:href="#icon-shoppingcart"
        />
      </svg>
    </span>
@ -452,7 +452,7 @@ exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
        width="1em"
      >
        <use
-          href="#icon-python"
+          xlink:href="#icon-python"
        />
      </svg>
    </span>
@ -466,7 +466,7 @@ exports[`renders ./components/icon/demo/two-tone.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="smile"
@ -499,7 +499,7 @@ exports[`renders ./components/icon/demo/two-tone.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <span
      aria-label="heart"
--- a/components/icon/tests/index.test.tsx
+++ b/components/icon/tests/index.test.tsx
@ -4,7 +4,7 @@ import { render } from '../../../tests/utils';

 // v3 兼容性测试
 describe('Icon', () => {
-  it('should render Icon', () => {
+  it('should not render Icon', () => {
    const { container } = render(<Icon />);
    expect(container.firstChild).toBe(null);
  });
@ -12,6 +12,7 @@ describe('Icon', () => {
  it('should throw Error', () => {
    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
    render(<Icon />);
-    expect(errSpy).toHaveBeenCalled();
+    expect(errSpy).toHaveBeenCalledWith('Warning: [antd: Icon] Empty Icon');
+    errSpy.mockRestore();
  });
 });
--- a/components/icon/tests/logo.svg
+++ b/components/icon/tests/logo.svg
--- a/components/image/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/image/tests/snapshots/demo-extend.test.ts.snap
@ -3,7 +3,7 @@
 exports[`renders ./components/image/demo/basic.md extend context correctly 1`] = `
 <div
  class="ant-image"
-  style="width:200px"
+  style="width: 200px;"
 >
  <img
    class="ant-image-img"
@ -53,17 +53,17 @@ Array [
  </button>,
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
-      style="display:none"
+      style="display: none;"
      width="200"
    />
    <div
      class="ant-image-mask"
-      style="display:none"
+      style="display: none;"
    >
      <div
        class="ant-image-mask-info"
@ -97,13 +97,13 @@ Array [
 exports[`renders ./components/image/demo/fallback.md extend context correctly 1`] = `
 <div
  class="ant-image"
-  style="width:200px;height:200px"
+  style="width: 200px; height: 200px;"
 >
  <img
    class="ant-image-img"
    height="200"
    src="error"
-    style="height:200px"
+    style="height: 200px;"
    width="200"
  />
  <div
@ -143,11 +143,11 @@ exports[`renders ./components/image/demo/placeholder.md extend context correctly
 >
  <div
    class="ant-space-item"
-    style="margin-right:12px"
+    style="margin-right: 12px;"
  >
    <div
      class="ant-image"
-      style="width:200px"
+      style="width: 200px;"
    >
      <img
        class="ant-image-img"
@ -160,7 +160,7 @@ exports[`renders ./components/image/demo/placeholder.md extend context correctly
      >
        <div
          class="ant-image"
-          style="width:200px"
+          style="width: 200px;"
        >
          <img
            class="ant-image-img"
@ -218,7 +218,7 @@ exports[`renders ./components/image/demo/preview-group.md extend context correct
 Array [
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
@ -256,7 +256,7 @@ Array [
  </div>,
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
@ -299,7 +299,7 @@ exports[`renders ./components/image/demo/preview-group-top-progress.md extend co
 Array [
  <div
    class="ant-image"
-    style="width:150px"
+    style="width: 150px;"
  >
    <img
      class="ant-image-img"
@ -337,7 +337,7 @@ Array [
  </div>,
  <div
    class="ant-image"
-    style="width:150px"
+    style="width: 150px;"
  >
    <img
      class="ant-image-img"
@ -375,7 +375,7 @@ Array [
  </div>,
  <div
    class="ant-image"
-    style="width:150px"
+    style="width: 150px;"
  >
    <img
      class="ant-image-img"
@ -418,7 +418,7 @@ exports[`renders ./components/image/demo/preview-group-visible.md extend context
 Array [
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
@ -455,7 +455,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display:none"
+    style="display: none;"
  >
    <div
      class="ant-image"
@ -572,7 +572,7 @@ Array [
 exports[`renders ./components/image/demo/preview-mask.md extend context correctly 1`] = `
 <div
  class="ant-image"
-  style="width:96px"
+  style="width: 96px;"
 >
  <img
    class="ant-image-img"
@ -587,7 +587,7 @@ exports[`renders ./components/image/demo/preview-mask.md extend context correctl
    >
      <div
        class="ant-space-item"
-        style="margin-bottom:8px"
+        style="margin-bottom: 8px;"
      >
        <span
          aria-label="zoom-in"
@ -622,7 +622,7 @@ exports[`renders ./components/image/demo/preview-mask.md extend context correctl
 exports[`renders ./components/image/demo/previewSrc.md extend context correctly 1`] = `
 <div
  class="ant-image"
-  style="width:200px"
+  style="width: 200px;"
 >
  <img
    class="ant-image-img"
--- a/components/image/tests/snapshots/demo.test.ts.snap
+++ b/components/image/tests/snapshots/demo.test.ts.snap
@ -3,7 +3,7 @@
 exports[`renders ./components/image/demo/basic.md correctly 1`] = `
 <div
  class="ant-image"
-  style="width:200px"
+  style="width: 200px;"
 >
  <img
    class="ant-image-img"
@ -53,17 +53,17 @@ Array [
  </button>,
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
-      style="display:none"
+      style="display: none;"
      width="200"
    />
    <div
      class="ant-image-mask"
-      style="display:none"
+      style="display: none;"
    >
      <div
        class="ant-image-mask-info"
@ -97,13 +97,13 @@ Array [
 exports[`renders ./components/image/demo/fallback.md correctly 1`] = `
 <div
  class="ant-image"
-  style="width:200px;height:200px"
+  style="width: 200px; height: 200px;"
 >
  <img
    class="ant-image-img"
    height="200"
    src="error"
-    style="height:200px"
+    style="height: 200px;"
    width="200"
  />
  <div
@ -143,11 +143,11 @@ exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:12px"
+    style="margin-right: 12px;"
  >
    <div
      class="ant-image"
-      style="width:200px"
+      style="width: 200px;"
    >
      <img
        class="ant-image-img"
@ -160,7 +160,7 @@ exports[`renders ./components/image/demo/placeholder.md correctly 1`] = `
      >
        <div
          class="ant-image"
-          style="width:200px"
+          style="width: 200px;"
        >
          <img
            class="ant-image-img"
@ -218,7 +218,7 @@ exports[`renders ./components/image/demo/preview-group.md correctly 1`] = `
 Array [
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
@ -256,7 +256,7 @@ Array [
  </div>,
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
@ -299,7 +299,7 @@ exports[`renders ./components/image/demo/preview-group-top-progress.md correctly
 Array [
  <div
    class="ant-image"
-    style="width:150px"
+    style="width: 150px;"
  >
    <img
      class="ant-image-img"
@ -337,7 +337,7 @@ Array [
  </div>,
  <div
    class="ant-image"
-    style="width:150px"
+    style="width: 150px;"
  >
    <img
      class="ant-image-img"
@ -375,7 +375,7 @@ Array [
  </div>,
  <div
    class="ant-image"
-    style="width:150px"
+    style="width: 150px;"
  >
    <img
      class="ant-image-img"
@ -418,7 +418,7 @@ exports[`renders ./components/image/demo/preview-group-visible.md correctly 1`]
 Array [
  <div
    class="ant-image"
-    style="width:200px"
+    style="width: 200px;"
  >
    <img
      class="ant-image-img"
@ -455,7 +455,7 @@ Array [
    </div>
  </div>,
  <div
-    style="display:none"
+    style="display: none;"
  >
    <div
      class="ant-image"
@ -572,7 +572,7 @@ Array [
 exports[`renders ./components/image/demo/preview-mask.md correctly 1`] = `
 <div
  class="ant-image"
-  style="width:96px"
+  style="width: 96px;"
 >
  <img
    class="ant-image-img"
@ -587,7 +587,7 @@ exports[`renders ./components/image/demo/preview-mask.md correctly 1`] = `
    >
      <div
        class="ant-space-item"
-        style="margin-bottom:8px"
+        style="margin-bottom: 8px;"
      >
        <span
          aria-label="zoom-in"
@ -622,7 +622,7 @@ exports[`renders ./components/image/demo/preview-mask.md correctly 1`] = `
 exports[`renders ./components/image/demo/previewSrc.md correctly 1`] = `
 <div
  class="ant-image"
-  style="width:200px"
+  style="width: 200px;"
 >
  <img
    class="ant-image-img"
--- a/components/index.tsx
+++ b/components/index.tsx
@ -16,6 +16,9 @@ if (
 }
 /* @remove-on-es-build-end */

+// Fix vite build error
+export const theme = null;
+
 export { default as Affix } from './affix';
 export type { AffixProps } from './affix';
 export { default as Alert } from './alert';
--- a/components/input-number/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input-number/tests/snapshots/demo-extend.test.ts.snap
@ -6,7 +6,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-group-wrapper"
@ -103,7 +103,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-group-wrapper"
@ -116,7 +116,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
        >
          <div
            class="ant-select ant-select-single ant-select-show-arrow"
-            style="width:60px"
+            style="width: 60px;"
          >
            <div
              class="ant-select-selector"
@ -125,16 +125,17 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="undefined_list_0"
+                  aria-activedescendant="rc_select_test_list_test"
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -149,19 +150,19 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
            </div>
            <div>
              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
+                class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                style="opacity: 0;"
              >
                <div>
                  <div
-                    id="undefined_list"
+                    id="rc_select_test_list"
                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
+                    style="height: 0px; width: 0px; overflow: hidden;"
                  >
                    <div
                      aria-label="+"
                      aria-selected="true"
-                      id="undefined_list_0"
+                      id="rc_select_test_list_test"
                      role="option"
                    >
                      add
@ -169,7 +170,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                    <div
                      aria-label="-"
                      aria-selected="false"
-                      id="undefined_list_1"
+                      id="rc_select_test_list_test"
                      role="option"
                    >
                      minus
@ -177,16 +178,16 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                  </div>
                  <div
                    class="rc-virtual-list"
-                    style="position:relative"
+                    style="position: relative;"
                  >
                    <div
                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      style="max-height: 256px; overflow-y: auto;"
                    >
                      <div>
                        <div
                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
+                          style="display: flex; flex-direction: column;"
                        >
                          <div
                            aria-selected="true"
@ -201,7 +202,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                            <span
                              aria-hidden="true"
                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
+                              style="user-select: none;"
                              unselectable="on"
                            />
                          </div>
@ -218,7 +219,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                            <span
                              aria-hidden="true"
                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
+                              style="user-select: none;"
                              unselectable="on"
                            />
                          </div>
@ -232,7 +233,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -336,7 +337,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
        >
          <div
            class="ant-select ant-select-single ant-select-show-arrow"
-            style="width:60px"
+            style="width: 60px;"
          >
            <div
              class="ant-select-selector"
@ -345,16 +346,17 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="undefined_list_0"
+                  aria-activedescendant="rc_select_test_list_test"
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -369,19 +371,19 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
            </div>
            <div>
              <div
-                class="ant-select-dropdown"
-                style="opacity:0"
+                class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                style="opacity: 0;"
              >
                <div>
                  <div
-                    id="undefined_list"
+                    id="rc_select_test_list"
                    role="listbox"
-                    style="height:0;width:0;overflow:hidden"
+                    style="height: 0px; width: 0px; overflow: hidden;"
                  >
                    <div
                      aria-label="$"
                      aria-selected="true"
-                      id="undefined_list_0"
+                      id="rc_select_test_list_test"
                      role="option"
                    >
                      USD
@ -389,7 +391,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                    <div
                      aria-label="€"
                      aria-selected="false"
-                      id="undefined_list_1"
+                      id="rc_select_test_list_test"
                      role="option"
                    >
                      EUR
@ -397,16 +399,16 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                  </div>
                  <div
                    class="rc-virtual-list"
-                    style="position:relative"
+                    style="position: relative;"
                  >
                    <div
                      class="rc-virtual-list-holder"
-                      style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                      style="max-height: 256px; overflow-y: auto;"
                    >
                      <div>
                        <div
                          class="rc-virtual-list-holder-inner"
-                          style="display:flex;flex-direction:column"
+                          style="display: flex; flex-direction: column;"
                        >
                          <div
                            aria-selected="true"
@ -421,7 +423,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                            <span
                              aria-hidden="true"
                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
+                              style="user-select: none;"
                              unselectable="on"
                            />
                          </div>
@ -438,7 +440,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                            <span
                              aria-hidden="true"
                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
+                              style="user-select: none;"
                              unselectable="on"
                            />
                          </div>
@ -455,7 +457,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                            <span
                              aria-hidden="true"
                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
+                              style="user-select: none;"
                              unselectable="on"
                            />
                          </div>
@ -472,7 +474,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
                            <span
                              aria-hidden="true"
                              class="ant-select-item-option-state"
-                              style="user-select:none;-webkit-user-select:none"
+                              style="user-select: none;"
                              unselectable="on"
                            />
                          </div>
@ -486,7 +488,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -516,7 +518,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-group-wrapper"
@ -638,7 +640,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
        >
          <div
            class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
-            style="width:150px"
+            style="width: 150px;"
          >
            <div
              class="ant-select-selector"
@ -648,14 +650,15 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
              >
                <input
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -669,8 +672,8 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
            </div>
            <div>
              <div
-                class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty"
-                style="opacity:0"
+                class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
+                style="opacity: 0;"
              >
                <div>
                  <div
@ -745,7 +748,7 @@ exports[`renders ./components/input-number/demo/addon.md extend context correctl
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -1095,7 +1098,7 @@ exports[`renders ./components/input-number/demo/controls.md extend context corre
 exports[`renders ./components/input-number/demo/digit.md extend context correctly 1`] = `
 <div
  class="ant-input-number"
-  style="width:200px"
+  style="width: 200px;"
 >
  <div
    class="ant-input-number-handler-wrap"
@ -1252,7 +1255,7 @@ Array [
    </div>
  </div>,
  <div
-    style="margin-top:20px"
+    style="margin-top: 20px;"
  >
    <button
      class="ant-btn ant-btn-primary"
@ -1272,7 +1275,7 @@ exports[`renders ./components/input-number/demo/formatter.md extend context corr
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number"
@ -1438,7 +1441,7 @@ exports[`renders ./components/input-number/demo/keyboard.md extend context corre
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number"
@ -1530,6 +1533,7 @@ exports[`renders ./components/input-number/demo/keyboard.md extend context corre
          checked=""
          class="ant-checkbox-input"
          type="checkbox"
+          value=""
        />
        <span
          class="ant-checkbox-inner"
@ -1549,7 +1553,7 @@ exports[`renders ./components/input-number/demo/out-of-range.md extend context c
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-out-of-range"
@ -1647,7 +1651,7 @@ exports[`renders ./components/input-number/demo/prefix.md extend context correct
 Array [
  <div
    class="ant-input-number-affix-wrapper"
-    style="width:100%"
+    style="width: 100%;"
  >
    <span
      class="ant-input-number-prefix"
@ -1732,7 +1736,7 @@ Array [
  <br />,
  <div
    class="ant-input-number-group-wrapper"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-input-number-wrapper ant-input-number-group"
@ -1848,7 +1852,7 @@ Array [
  <br />,
  <div
    class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-disabled"
-    style="width:100%"
+    style="width: 100%;"
  >
    <span
      class="ant-input-number-prefix"
@ -1939,7 +1943,7 @@ exports[`renders ./components/input-number/demo/size.md extend context correctly
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-lg"
@ -2020,7 +2024,7 @@ exports[`renders ./components/input-number/demo/size.md extend context correctly
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number"
@ -2185,15 +2189,15 @@ exports[`renders ./components/input-number/demo/size.md extend context correctly
 exports[`renders ./components/input-number/demo/status.md extend context correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-status-error"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-input-number-handler-wrap"
@ -2268,11 +2272,11 @@ exports[`renders ./components/input-number/demo/status.md extend context correct
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-status-warning"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-input-number-handler-wrap"
@ -2347,11 +2351,11 @@ exports[`renders ./components/input-number/demo/status.md extend context correct
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-error"
-      style="width:100%"
+      style="width: 100%;"
    >
      <span
        class="ant-input-number-prefix"
@ -2459,7 +2463,7 @@ exports[`renders ./components/input-number/demo/status.md extend context correct
  >
    <div
      class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-warning"
-      style="width:100%"
+      style="width: 100%;"
    >
      <span
        class="ant-input-number-prefix"
--- a/components/input-number/tests/snapshots/demo.test.ts.snap
+++ b/components/input-number/tests/snapshots/demo.test.ts.snap
@ -6,7 +6,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-group-wrapper"
@ -103,7 +103,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-group-wrapper"
@ -116,7 +116,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
        >
          <div
            class="ant-select ant-select-single ant-select-show-arrow"
-            style="width:60px"
+            style="width: 60px;"
          >
            <div
              class="ant-select-selector"
@ -125,16 +125,17 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="undefined_list_0"
+                  aria-activedescendant="rc_select_test_list_test"
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -150,7 +151,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -254,7 +255,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
        >
          <div
            class="ant-select ant-select-single ant-select-show-arrow"
-            style="width:60px"
+            style="width: 60px;"
          >
            <div
              class="ant-select-selector"
@ -263,16 +264,17 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="undefined_list_0"
+                  aria-activedescendant="rc_select_test_list_test"
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -288,7 +290,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -318,7 +320,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-group-wrapper"
@ -440,7 +442,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
        >
          <div
            class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
-            style="width:150px"
+            style="width: 150px;"
          >
            <div
              class="ant-select-selector"
@ -450,14 +452,15 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
              >
                <input
                  aria-autocomplete="list"
-                  aria-controls="undefined_list"
+                  aria-controls="rc_select_test_list"
                  aria-haspopup="listbox"
-                  aria-owns="undefined_list"
+                  aria-owns="rc_select_test_list"
                  autocomplete="off"
                  class="ant-select-selection-search-input"
+                  id="rc_select_test"
                  readonly=""
                  role="combobox"
-                  style="opacity:0"
+                  style="opacity: 0;"
                  type="search"
                  unselectable="on"
                  value=""
@ -472,7 +475,7 @@ exports[`renders ./components/input-number/demo/addon.md correctly 1`] = `
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select:none;-webkit-user-select:none"
+              style="user-select: none;"
              unselectable="on"
            >
              <span
@ -822,7 +825,7 @@ exports[`renders ./components/input-number/demo/controls.md correctly 1`] = `
 exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
 <div
  class="ant-input-number"
-  style="width:200px"
+  style="width: 200px;"
 >
  <div
    class="ant-input-number-handler-wrap"
@ -979,7 +982,7 @@ Array [
    </div>
  </div>,
  <div
-    style="margin-top:20px"
+    style="margin-top: 20px;"
  >
    <button
      class="ant-btn ant-btn-primary"
@ -999,7 +1002,7 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number"
@ -1165,7 +1168,7 @@ exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number"
@ -1257,6 +1260,7 @@ exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
          checked=""
          class="ant-checkbox-input"
          type="checkbox"
+          value=""
        />
        <span
          class="ant-checkbox-inner"
@ -1276,7 +1280,7 @@ exports[`renders ./components/input-number/demo/out-of-range.md correctly 1`] =
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-out-of-range"
@ -1374,7 +1378,7 @@ exports[`renders ./components/input-number/demo/prefix.md correctly 1`] = `
 Array [
  <div
    class="ant-input-number-affix-wrapper"
-    style="width:100%"
+    style="width: 100%;"
  >
    <span
      class="ant-input-number-prefix"
@ -1459,7 +1463,7 @@ Array [
  <br />,
  <div
    class="ant-input-number-group-wrapper"
-    style="width:100%"
+    style="width: 100%;"
  >
    <div
      class="ant-input-number-wrapper ant-input-number-group"
@ -1575,7 +1579,7 @@ Array [
  <br />,
  <div
    class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-disabled"
-    style="width:100%"
+    style="width: 100%;"
  >
    <span
      class="ant-input-number-prefix"
@ -1666,7 +1670,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-lg"
@ -1747,7 +1751,7 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-right:8px"
+    style="margin-right: 8px;"
  >
    <div
      class="ant-input-number"
@ -1912,15 +1916,15 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
 exports[`renders ./components/input-number/demo/status.md correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
-  style="width:100%"
+  style="width: 100%;"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-status-error"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-input-number-handler-wrap"
@ -1995,11 +1999,11 @@ exports[`renders ./components/input-number/demo/status.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number ant-input-number-status-warning"
-      style="width:100%"
+      style="width: 100%;"
    >
      <div
        class="ant-input-number-handler-wrap"
@ -2074,11 +2078,11 @@ exports[`renders ./components/input-number/demo/status.md correctly 1`] = `
  </div>
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-error"
-      style="width:100%"
+      style="width: 100%;"
    >
      <span
        class="ant-input-number-prefix"
@ -2186,7 +2190,7 @@ exports[`renders ./components/input-number/demo/status.md correctly 1`] = `
  >
    <div
      class="ant-input-number-affix-wrapper ant-input-number-affix-wrapper-status-warning"
-      style="width:100%"
+      style="width: 100%;"
    >
      <span
        class="ant-input-number-prefix"
--- a/components/input-number/demo/out-of-range.md
+++ b/components/input-number/demo/out-of-range.md
@ -18,7 +18,7 @@ import { Button, InputNumber, Space } from 'antd';
 import React, { useState } from 'react';

 const App: React.FC = () => {
-  const [value, setValue] = useState<string | number>('99');
+  const [value, setValue] = useState<string | number | null>('99');

  return (
    <Space>
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@ -3,6 +3,7 @@ import UpOutlined from '@ant-design/icons/UpOutlined';
 import classNames from 'classnames';
 import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
 import RcInputNumber from 'rc-input-number';
+import type { ValueType } from 'rc-input-number/lib/utils/MiniDecimal';
 import * as React from 'react';
 import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
@ -14,8 +15,6 @@ import { cloneElement } from '../_util/reactNode';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';

-type ValueType = string | number;
-
 export interface InputNumberProps<T extends ValueType = ValueType>
  extends Omit<RcInputNumberProps<T>, 'prefix' | 'size' | 'controls'> {
  prefixCls?: string;
--- a/components/input/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input/tests/snapshots/demo-extend.test.ts.snap
--- a/components/input/tests/snapshots/demo.test.ts.snap
+++ b/components/input/tests/snapshots/demo.test.ts.snap
--- a/components/layout/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/layout/tests/snapshots/demo-extend.test.ts.snap
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/components/layout/tests/snapshots/demo.test.ts.snap
--- a/components/list/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/list/tests/snapshots/demo-extend.test.ts.snap
@ -179,14 +179,14 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
    >
      <div
        class="ant-row"
-        style="margin-left:-8px;margin-right:-8px"
+        style="margin-left: -8px; margin-right: -8px;"
      >
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -217,11 +217,11 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
          </div>
        </div>
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -252,11 +252,11 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
          </div>
        </div>
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -287,11 +287,11 @@ exports[`renders ./components/list/demo/grid.md extend context correctly 1`] = `
          </div>
        </div>
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -340,14 +340,14 @@ Array [
      >
        <div
          class="ant-row"
-          style="margin-left:-8px;margin-right:-8px"
+          style="margin-left: -8px; margin-right: -8px;"
        >
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -378,11 +378,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -413,11 +413,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -448,11 +448,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -483,11 +483,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -518,11 +518,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -567,14 +567,14 @@ Array [
      >
        <div
          class="ant-row"
-          style="margin-left:-8px;margin-right:-8px"
+          style="margin-left: -8px; margin-right: -8px;"
        >
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -605,11 +605,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -640,11 +640,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -675,11 +675,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -710,11 +710,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -745,11 +745,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -794,14 +794,14 @@ Array [
      >
        <div
          class="ant-row"
-          style="margin-left:-8px;margin-right:-8px"
+          style="margin-left: -8px; margin-right: -8px;"
        >
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -833,11 +833,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -869,11 +869,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -905,11 +905,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -941,11 +941,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -977,11 +977,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -1022,14 +1022,14 @@ Array [
 exports[`renders ./components/list/demo/infinite-load.md extend context correctly 1`] = `
 <div
  id="scrollableDiv"
-  style="height:400px;overflow:auto;padding:0 16px;border:1px solid rgba(140, 140, 140, 0.35)"
+  style="height: 400px; overflow: auto; padding: 0px 16px; border: 1px solid rgba(140, 140, 140, 0.35);"
 >
  <div
    class="infinite-scroll-component__outerdiv"
  >
    <div
      class="infinite-scroll-component "
-      style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
+      style="height: auto; overflow: auto;"
    >
      <div
        class="ant-list ant-list-split"
@ -1108,7 +1108,7 @@ exports[`renders ./components/list/demo/infinite-load.md extend context correctl
        >
          <h3
            class="ant-skeleton-title"
-            style="width:50%"
+            style="width: 50%;"
          />
          <ul
            class="ant-skeleton-paragraph"
@ -1157,7 +1157,7 @@ exports[`renders ./components/list/demo/loadmore.md extend context correctly 1`]
      class="ant-spin-container ant-spin-blur"
    >
      <div
-        style="min-height:53px"
+        style="min-height: 53px;"
      />
    </div>
  </div>
@ -1176,12 +1176,14 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
    >
      <div
        class="ant-row"
-        style="margin-left:-8px;margin-right:-8px"
+        style="margin-left: -8px; margin-right: -8px;"
      >
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1211,10 +1213,12 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1244,10 +1248,12 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1277,10 +1283,12 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1310,10 +1318,12 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1343,10 +1353,12 @@ exports[`renders ./components/list/demo/responsive.md extend context correctly 1
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1423,7 +1435,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Racing car sprays burning fuel into crowd.
+            Racing car sprays burning fuel into crowd.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1435,7 +1447,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Japanese princess to wed commoner.
+            Japanese princess to wed commoner.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1447,7 +1459,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Australian walks 100km after outback crash.
+            Australian walks 100km after outback crash.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1459,7 +1471,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Man charged over missing wedding girl.
+            Man charged over missing wedding girl.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1471,7 +1483,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Los Angeles battles huge wildfires.
+            Los Angeles battles huge wildfires.
          </li>
        </ul>
      </div>
@ -1679,7 +1691,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="star"
@ -1717,7 +1729,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="like"
@ -1755,7 +1767,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="message"
@ -1845,7 +1857,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="star"
@ -1883,7 +1895,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="like"
@ -1921,7 +1933,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="message"
@ -2011,7 +2023,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="star"
@ -2049,7 +2061,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="like"
@ -2087,7 +2099,7 @@ exports[`renders ./components/list/demo/vertical.md extend context correctly 1`]
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="message"
@ -2333,16 +2345,16 @@ exports[`renders ./components/list/demo/virtual-list.md extend context correctly
    >
      <div
        class="rc-virtual-list"
-        style="position:relative"
+        style="position: relative;"
      >
        <div
          class="rc-virtual-list-holder"
-          style="height:400px;overflow-y:auto;overflow-anchor:none"
+          style="height: 400px; overflow-y: auto;"
        >
          <div>
            <div
              class="rc-virtual-list-holder-inner"
-              style="display:flex;flex-direction:column"
+              style="display: flex; flex-direction: column;"
            />
          </div>
        </div>
--- a/components/list/tests/snapshots/demo.test.ts.snap
+++ b/components/list/tests/snapshots/demo.test.ts.snap
@ -179,14 +179,14 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
    >
      <div
        class="ant-row"
-        style="margin-left:-8px;margin-right:-8px"
+        style="margin-left: -8px; margin-right: -8px;"
      >
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -217,11 +217,11 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
          </div>
        </div>
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -252,11 +252,11 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
          </div>
        </div>
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -287,11 +287,11 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
          </div>
        </div>
        <div
-          style="width:25%;max-width:25%"
+          style="width: 25%; max-width: 25%;"
        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -340,14 +340,14 @@ Array [
      >
        <div
          class="ant-row"
-          style="margin-left:-8px;margin-right:-8px"
+          style="margin-left: -8px; margin-right: -8px;"
        >
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -378,11 +378,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -413,11 +413,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -448,11 +448,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -483,11 +483,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -518,11 +518,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -567,14 +567,14 @@ Array [
      >
        <div
          class="ant-row"
-          style="margin-left:-8px;margin-right:-8px"
+          style="margin-left: -8px; margin-right: -8px;"
        >
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -605,11 +605,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -640,11 +640,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -675,11 +675,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -710,11 +710,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -745,11 +745,11 @@ Array [
            </div>
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -794,14 +794,14 @@ Array [
      >
        <div
          class="ant-row"
-          style="margin-left:-8px;margin-right:-8px"
+          style="margin-left: -8px; margin-right: -8px;"
        >
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -833,11 +833,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -869,11 +869,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -905,11 +905,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -941,11 +941,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -977,11 +977,11 @@ Array [
            <div />
          </div>
          <div
-            style="width:25%;max-width:25%"
+            style="width: 25%; max-width: 25%;"
          >
            <div
              class="ant-col"
-              style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+              style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
            >
              <div
                class="ant-list-item"
@ -1022,14 +1022,14 @@ Array [
 exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
 <div
  id="scrollableDiv"
-  style="height:400px;overflow:auto;padding:0 16px;border:1px solid rgba(140, 140, 140, 0.35)"
+  style="height: 400px; overflow: auto; padding: 0px 16px; border: 1px solid rgba(140, 140, 140, 0.35);"
 >
  <div
    class="infinite-scroll-component__outerdiv"
  >
    <div
      class="infinite-scroll-component "
-      style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
+      style="height: auto; overflow: auto;"
    >
      <div
        class="ant-list ant-list-split"
@ -1108,7 +1108,7 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
        >
          <h3
            class="ant-skeleton-title"
-            style="width:50%"
+            style="width: 50%;"
          />
          <ul
            class="ant-skeleton-paragraph"
@ -1157,7 +1157,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
      class="ant-spin-container ant-spin-blur"
    >
      <div
-        style="min-height:53px"
+        style="min-height: 53px;"
      />
    </div>
  </div>
@ -1176,12 +1176,14 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
    >
      <div
        class="ant-row"
-        style="margin-left:-8px;margin-right:-8px"
+        style="margin-left: -8px; margin-right: -8px;"
      >
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1211,10 +1213,12 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1244,10 +1248,12 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1277,10 +1283,12 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1310,10 +1318,12 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1343,10 +1353,12 @@ exports[`renders ./components/list/demo/responsive.md correctly 1`] = `
            </div>
          </div>
        </div>
-        <div>
+        <div
+          style="width: 100%; max-width: 100%;"
+        >
          <div
            class="ant-col"
-            style="padding-left:8px;padding-right:8px;flex:1 1 auto"
+            style="padding-left: 8px; padding-right: 8px; flex: 1 1 auto;"
          >
            <div
              class="ant-list-item"
@ -1423,7 +1435,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Racing car sprays burning fuel into crowd.
+            Racing car sprays burning fuel into crowd.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1435,7 +1447,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Japanese princess to wed commoner.
+            Japanese princess to wed commoner.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1447,7 +1459,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Australian walks 100km after outback crash.
+            Australian walks 100km after outback crash.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1459,7 +1471,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Man charged over missing wedding girl.
+            Man charged over missing wedding girl.
          </li>
          <li
            class="ant-list-item ant-list-item-no-flex"
@ -1471,7 +1483,7 @@ Array [
                [ITEM]
              </mark>
            </span>
-             Los Angeles battles huge wildfires.
+            Los Angeles battles huge wildfires.
          </li>
        </ul>
      </div>
@ -1679,7 +1691,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="star"
@ -1717,7 +1729,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="like"
@ -1755,7 +1767,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="message"
@ -1845,7 +1857,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="star"
@ -1883,7 +1895,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="like"
@ -1921,7 +1933,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="message"
@ -2011,7 +2023,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="star"
@ -2049,7 +2061,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="like"
@ -2087,7 +2099,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
                >
                  <div
                    class="ant-space-item"
-                    style="margin-right:8px"
+                    style="margin-right: 8px;"
                  >
                    <span
                      aria-label="message"
@ -2333,16 +2345,16 @@ exports[`renders ./components/list/demo/virtual-list.md correctly 1`] = `
    >
      <div
        class="rc-virtual-list"
-        style="position:relative"
+        style="position: relative;"
      >
        <div
          class="rc-virtual-list-holder"
-          style="height:400px;overflow-y:auto;overflow-anchor:none"
+          style="height: 400px; overflow-y: auto;"
        >
          <div>
            <div
              class="rc-virtual-list-holder-inner"
-              style="display:flex;flex-direction:column"
+              style="display: flex; flex-direction: column;"
            />
          </div>
        </div>
--- a/components/mentions/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/mentions/tests/snapshots/demo-extend.test.ts.snap
@ -3,7 +3,7 @@
 exports[`renders ./components/mentions/demo/async.md extend context correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -15,7 +15,7 @@ exports[`renders ./components/mentions/demo/async.md extend context correctly 1`
 exports[`renders ./components/mentions/demo/autoSize.md extend context correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -27,7 +27,7 @@ exports[`renders ./components/mentions/demo/autoSize.md extend context correctly
 exports[`renders ./components/mentions/demo/basic.md extend context correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -147,7 +147,6 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
                Submit
              </span>
            </button>
-               
            <button
              class="ant-btn ant-btn-default"
              type="button"
@ -167,7 +166,7 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
 exports[`renders ./components/mentions/demo/placement.md extend context correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -179,7 +178,7 @@ exports[`renders ./components/mentions/demo/placement.md extend context correctl
 exports[`renders ./components/mentions/demo/prefix.md extend context correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -192,11 +191,11 @@ exports[`renders ./components/mentions/demo/prefix.md extend context correctly 1
 exports[`renders ./components/mentions/demo/readonly.md extend context correctly 1`] = `
 Array [
  <div
-    style="margin-bottom:10px"
+    style="margin-bottom: 10px;"
  >
    <div
      class="ant-mentions ant-mentions-disabled"
-      style="width:100%"
+      style="width: 100%;"
    >
      <textarea
        class="rc-textarea rc-textarea-disabled"
@ -208,7 +207,7 @@ Array [
  </div>,
  <div
    class="ant-mentions"
-    style="width:100%"
+    style="width: 100%;"
  >
    <textarea
      class="rc-textarea"
@ -226,7 +225,7 @@ exports[`renders ./components/mentions/demo/status.md extend context correctly 1
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-mentions ant-mentions-status-error"
--- a/components/mentions/tests/snapshots/demo.test.ts.snap
+++ b/components/mentions/tests/snapshots/demo.test.ts.snap
@ -3,7 +3,7 @@
 exports[`renders ./components/mentions/demo/async.md correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -15,7 +15,7 @@ exports[`renders ./components/mentions/demo/async.md correctly 1`] = `
 exports[`renders ./components/mentions/demo/autoSize.md correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -27,7 +27,7 @@ exports[`renders ./components/mentions/demo/autoSize.md correctly 1`] = `
 exports[`renders ./components/mentions/demo/basic.md correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -147,7 +147,6 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
                Submit
              </span>
            </button>
-               
            <button
              class="ant-btn ant-btn-default"
              type="button"
@ -167,7 +166,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
 exports[`renders ./components/mentions/demo/placement.md correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -179,7 +178,7 @@ exports[`renders ./components/mentions/demo/placement.md correctly 1`] = `
 exports[`renders ./components/mentions/demo/prefix.md correctly 1`] = `
 <div
  class="ant-mentions"
-  style="width:100%"
+  style="width: 100%;"
 >
  <textarea
    class="rc-textarea"
@ -192,11 +191,11 @@ exports[`renders ./components/mentions/demo/prefix.md correctly 1`] = `
 exports[`renders ./components/mentions/demo/readonly.md correctly 1`] = `
 Array [
  <div
-    style="margin-bottom:10px"
+    style="margin-bottom: 10px;"
  >
    <div
      class="ant-mentions ant-mentions-disabled"
-      style="width:100%"
+      style="width: 100%;"
    >
      <textarea
        class="rc-textarea rc-textarea-disabled"
@ -208,7 +207,7 @@ Array [
  </div>,
  <div
    class="ant-mentions"
-    style="width:100%"
+    style="width: 100%;"
  >
    <textarea
      class="rc-textarea"
@ -226,7 +225,7 @@ exports[`renders ./components/mentions/demo/status.md correctly 1`] = `
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom: 8px;"
  >
    <div
      class="ant-mentions ant-mentions-status-error"
--- a/components/menu/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/menu/tests/snapshots/demo-extend.test.ts.snap
--- a/Show More
+++ b/Show More