chore: auto merge branches (#37953)

chore: next merge feature
2025-08-06 16:06:28 +08:00 · 2022-10-12 04:16:47 +00:00 · 2022-10-12 04:16:47 +00:00 · 808bab2cec
commit 808bab2cec
parent 2b15bdafac 50a7e0ce51
326 changed files with 20977 additions and 29875 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -58,7 +58,7 @@ Describe changes from the user side, and list all potential break changes or oth

 ### ☑️ Self-Check before Merge

-⚠️ Please check all items below before review. ⚠️
+⚠️ Please check all items below before requesting a reviewing. ⚠️

 - [ ] Doc is updated/provided or not needed
 - [ ] Demo is updated/provided or not needed
--- a/.github/workflows/ui-upload.yml
+++ b/.github/workflows/ui-upload.yml
@ -18,6 +18,7 @@ jobs:
    name: deploy preview
    runs-on: ubuntu-latest
    if: >
+      github.repository == 'ant-design/ant-design' &&
      github.event.workflow_run.conclusion == 'success'
    steps:
      - name: checkout
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@ -10,6 +10,9 @@ concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true

+permissions:
+  contents: read
+
 jobs:
  imagesnapshot:
    runs-on: ubuntu-latest
--- a/.jest.image.js
+++ b/.jest.image.js
@ -13,7 +13,6 @@ module.exports = {
  },
  testRegex: 'image\\.test\\.(j|t)s$',
  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
  globals: {
    'ts-jest': {
      tsConfigFile: './tsconfig.test.json',
--- a/.jest.js
+++ b/.jest.js
@ -1,13 +1,12 @@
 const transformIgnorePatterns = [
-  '/dist/',
  // Ignore modules without es dir.
  // Update: @babel/runtime should also be transformed
-  'node_modules/(?!.*@(babel|ant-design))(?!array-move)[^/]+?/(?!(es|node_modules)/)',
+  '/node_modules/(?!array-move|react-dnd|react-dnd-html5-backend|@react-dnd|dnd-core|tween-one|@babel|@ant-design)[^/]+?/(?!(es)/)',
 ];

 function getTestRegex(libDir) {
  if (libDir === 'dist') {
-    return 'demo\\.test\\.js$';
+    return 'demo\\.test\\.(j|t)s$';
  }
  return '.*\\.test\\.(j|t)sx?$';
 }
@ -20,12 +19,6 @@ module.exports = {
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
  modulePathIgnorePatterns: ['/_site/'],
  moduleNameMapper: {
-    '/^dnd-core$/': 'dnd-core/dist/cjs',
-    '/^react-dnd$/': 'react-dnd/dist/cjs',
-    '/^react-dnd-html5-backend$/': 'react-dnd-html5-backend/dist/cjs',
-    '/^react-dnd-touch-backend$/': 'react-dnd-touch-backend/dist/cjs',
-    '/^react-dnd-test-backend$/': 'react-dnd-test-backend/dist/cjs',
-    '/^react-dnd-test-utils$/': 'react-dnd-test-utils/dist/cjs',
    '/\\.(css|less)$/': 'identity-obj-proxy',
  },
  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
@ -47,7 +40,6 @@ module.exports = {
    '!components/__tests__/node.test.tsx',
  ],
  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
  globals: {
    'ts-jest': {
      tsConfig: './tsconfig.test.json',
--- a/.jest.site.js
+++ b/.jest.site.js
@ -10,10 +10,9 @@ module.exports = {
    '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
    '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
  },
-  testRegex: 'check-site\\.js$',
+  testRegex: 'check-site\\.(j|t)s$',
  testEnvironment: 'node',
  transformIgnorePatterns,
-  snapshotSerializers: ['enzyme-to-json/serializer'],
  globals: {
    'ts-jest': {
      tsConfigFile: './tsconfig.test.json',
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,27 @@ timeline: true

 ---

+## 4.23.5
+
+`2022-10-10`
+
+- 🐞 Fix Textarea with `autoSize` blink on the fist mount. [#37847](https://github.com/ant-design/ant-design/pull/37847)
+- 💄 Fix Input.Password `style={{ fontSize }}`not working. [#37898](https://github.com/ant-design/ant-design/pull/37898)
+- 💄 Fix Input.Textarea `style={{ resize: 'none' }}` is not working when `showCount` is applied. [#37855](https://github.com/ant-design/ant-design/pull/37855) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 Fix Input.Search border style in RTL. [#37865](https://github.com/ant-design/ant-design/pull/37865) [@foryuki](https://github.com/foryuki)
+- 🇷🇺 Fix Russian translation for Transfer.selectInvert. [#37858](https://github.com/ant-design/ant-design/pull/37858) [@svtslav](https://github.com/svtslav)
+- 🇵🇹 Add missing Portuguese translations. [#37857](https://github.com/ant-design/ant-design/pull/37857) [@ernestfolch](https://github.com/ernestfolch)
+- ⚡️ Update Table and Tree for improve state performance. [#37875](https://github.com/ant-design/ant-design/pull/37875) [@sunteago](https://github.com/sunteago)
+- TypeScript
+  - 🤖 Update type definition for a part of components. [#37861](https://github.com/ant-design/ant-design/pull/37861) [@zheeeng](https://github.com/zheeeng)
+
+## 4.23.4
+
+`2022-10-01`
+
+- 🐞 Fix Typography ellipsis percision bug. [#37802](https://github.com/ant-design/ant-design/pull/37802) [@zheeeng](https://github.com/zheeeng)
+- 🐞 Fix Input.Password that should not have value prop on input when inputing. [#37801](https://github.com/ant-design/ant-design/pull/37801) [@MadCcc](https://github.com/MadCcc)
+
 ## 4.23.3

 `2022-09-27`
@ -316,7 +337,7 @@ timeline: true
 - 🐞 Fix Drawer close twice `children` will undefined. [#35853](https://github.com/ant-design/ant-design/pull/35853) [@crazyair](https://github.com/crazyair)
 - Skeleton
  - 💄 Remove Skeleton default `margin-top` style. [#35848](https://github.com/ant-design/ant-design/pull/35848)
-  - 💄 Optimize Skeleton `active` animation perfermance. [#35836](https://github.com/ant-design/ant-design/pull/35836) [@slotDumpling](https://github.com/slotDumpling)
+  - 💄 Optimize Skeleton `active` animation performance. [#35836](https://github.com/ant-design/ant-design/pull/35836) [@slotDumpling](https://github.com/slotDumpling)
 - 💄 Remove `!important` in Radio style with `disabled`. [#35920](https://github.com/ant-design/ant-design/pull/35920)
 - TypeScript
  - 🤖 Fix Form.List type `FormListFieldData` missing property `fieldKey`. [#35884](https://github.com/ant-design/ant-design/pull/35884) [@nanianlisao](https://github.com/nanianlisao)
@ -671,7 +692,7 @@ timeline: true

 - 🆕 Menu support `home` and `end` keyboard navigate. [#33642](https://github.com/ant-design/ant-design/pull/33642) [@dartamonov-vertex](https://github.com/dartamonov-vertex)
 - Table
-  - ⚡️ Improve Table perfermance significantly when mount and unmount. [#33554](https://github.com/ant-design/ant-design/pull/33554)
+  - ⚡️ Improve Table performance significantly when mount and unmount. [#33554](https://github.com/ant-design/ant-design/pull/33554)
  - 🐞 Fix Table emptynode fixed display. [#33610](https://github.com/ant-design/ant-design/pull/33610) [@hemengke1997](https://github.com/hemengke1997)
  - 🐞 Fix Table tree data hover error. [#33638](https://github.com/ant-design/ant-design/pull/33638) [@LongHaoo](https://github.com/LongHaoo)
 - Form
@ -1426,7 +1447,7 @@ Wrong release is the same as `4.12.0`, if you need to lock the version, you need
  - 🐞 Fix multiple Image.PreviewGroup contain same image. [#28881](https://github.com/ant-design/ant-design/issues/28881)
 - ConfigProvider
  - 🆕 ConfigProvider supports `iconPrefixCls`. [#28924](https://github.com/ant-design/ant-design/pull/28924)
-  - ⚡️ Optimize ConfigProvider props updating perfermance. [#28792](https://github.com/ant-design/ant-design/pull/28792) [@zxc0328](https://github.com/zxc0328)
+  - ⚡️ Optimize ConfigProvider props updating performance. [#28792](https://github.com/ant-design/ant-design/pull/28792) [@zxc0328](https://github.com/zxc0328)
 - 💄 Tweak TreeSelect filter highlight color. [#28984](https://github.com/ant-design/ant-design/pull/28984)
 - 💄 Fix Select item align style with custom `tagRender`. [#28962](https://github.com/ant-design/ant-design/pull/28962)
 - Form
@ -2461,7 +2482,7 @@ It is a wrong release which same as `4.10.3`, don't use it.
 - 💄 Add Menu default `text-align` style. [#24253](https://github.com/ant-design/ant-design/pull/24253)
 - 🛠 Refactor List code. [#24280](https://github.com/ant-design/ant-design/pull/24280) [@hengkx](https://github.com/hengkx)
 - 🛠 Modify the Alert with hooks to support strict mode. [#24236](https://github.com/ant-design/ant-design/pull/24236) [@hengkx](https://github.com/hengkx)
- 🐞Fix Card perfermance bug when use with `react-split`. [#24425](https://github.com/ant-design/ant-design/pull/24425)
+- 🐞Fix Card performance bug when use with `react-split`. [#24425](https://github.com/ant-design/ant-design/pull/24425)
 - TypeScript
  - 🛠Cascader ts definition update. [#24393](https://github.com/ant-design/ant-design/pull/24393) [@zhangyu1818](https://github.com/zhangyu1818)
  - 🐞 Fix TS error of `Could not find a declaration rc-upload`. [#24325](https://github.com/ant-design/ant-design/pull/24325)
@ -2751,7 +2772,7 @@ It is a wrong release which same as `4.10.3`, don't use it.
 - 💄 Adjust RangePicker arrow style. [#22847](https://github.com/ant-design/ant-design/pull/22847)
 - 🐞 Fix Text with `ellipsis` align issue. [#22836](https://github.com/ant-design/ant-design/pull/22836)
 - 💄 Tweak `@info-color` should be `@primary-color` defaultly. [#22723](https://github.com/ant-design/ant-design/pull/22723)
- 🐞 Fix BackTop not working in iframe and improve it's perfermance. [#22788](https://github.com/ant-design/ant-design/pull/22788)
+- 🐞 Fix BackTop not working in iframe and improve it's performance. [#22788](https://github.com/ant-design/ant-design/pull/22788)
 - 🐞 Fix Select inconsistent height when `mode="multiple"` and `size="large" />`. [#22904](https://github.com/ant-design/ant-design/pull/22904)
 - 🐞 Fix Radio less variable. [#22803](https://github.com/ant-design/ant-design/pull/22803) [@yoyo837](https://github.com/yoyo837)
 - 🐞 Fix Card Tabs do not support small size. [#22666](https://github.com/ant-design/ant-design/pull/22666) [@MrHeer](https://github.com/MrHeer)
@ -2932,7 +2953,7 @@ It is a wrong release which same as `4.10.3`, don't use it.

 - Form
  - 🐞 Fix nest Form.Item dynamic remove will warning in React. [#21896](https://github.com/ant-design/ant-design/pull/21896)
-  - ⚡️ Form `useForm` now return same instance for perfermance. [#21927](https://github.com/ant-design/ant-design/pull/21927)
+  - ⚡️ Form `useForm` now return same instance for performance. [#21927](https://github.com/ant-design/ant-design/pull/21927)
  - ⚡️ Refactor Form.Item render logic that will only render once when children is a pure component. [#21991](https://github.com/ant-design/ant-design/pull/21991)
  - ⚡️ FormContext use a memoized value to avoid trigger FormItem's unintentional renders. [#21980](https://github.com/ant-design/ant-design/pull/21980) [@qiqiboy](https://github.com/qiqiboy)
 - Table
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,27 @@ timeline: true

 ---

+## 4.23.5
+
+`2022-10-10`
+
+- 🐞 修复 Textarea 配置 `autoSize` 在第一次渲染时闪烁的问题。[#37847](https://github.com/ant-design/ant-design/pull/37847)
+- 💄 修复 Input.Password 不支持 `style={{ fontSize }}` 的问题。[#37898](https://github.com/ant-design/ant-design/pull/37898)
+- 💄 修复 Input.Textarea 当指定 `showCount` 时 `style={{ resize: 'none' }}` 样式设定失效的问题。[#37855](https://github.com/ant-design/ant-design/pull/37855) [@kiner-tang](https://github.com/kiner-tang)
+- 💄 修复 RTL 排版中 Input.Search 边框样式问题。[#37865](https://github.com/ant-design/ant-design/pull/37865) [@foryuki](https://github.com/foryuki)
+- 🇷🇺 修复 Transfer.selectInvert 的俄语翻译。[#37858](https://github.com/ant-design/ant-design/pull/37858) [@svtslav](https://github.com/svtslav)
+- 🇵🇹 添加缺失的葡萄牙语翻译。[#37857](https://github.com/ant-design/ant-design/pull/37857) [@ernestfolch](https://github.com/ernestfolch)
+- ⚡️ 提升 Table 及 Tree 的 State 性能。[#37875](https://github.com/ant-design/ant-design/pull/37875) [@sunteago](https://github.com/sunteago)
+- TypeScript
+  - 🤖 更新部分组件的类型声明。[#37861](https://github.com/ant-design/ant-design/pull/37861) [@zheeeng](https://github.com/zheeeng)
+
+## 4.23.4
+
+`2022-10-01`
+
+- 🐞 修复 Typography `ellipsis` 精度问题。[#37802](https://github.com/ant-design/ant-design/pull/37802) [@zheeeng](https://github.com/zheeeng)
+- 🐞 修复 Input.Password 在输入时 input 上会有 `value` 属性的问题。[#37801](https://github.com/ant-design/ant-design/pull/37801) [@MadCcc](https://github.com/MadCcc)
+
 ## 4.23.3

 `2022-09-27`
--- 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/affix/index.tsx
+++ b/components/affix/index.tsx
@ -79,7 +79,7 @@ class Affix extends React.Component<InternalAffixProps, AffixState> {
      return target;
    }

-    return getTargetContainer || getDefaultTarget;
+    return getTargetContainer ?? getDefaultTarget;
  }

  // Event handler
--- a/components/alert/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/alert/tests/snapshots/demo-extend.test.ts.snap
@ -211,7 +211,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"
--- a/components/alert/tests/snapshots/demo.test.ts.snap
+++ b/components/alert/tests/snapshots/demo.test.ts.snap
@ -211,7 +211,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"
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@ -39,7 +39,7 @@ export interface AlertProps {
  className?: string;
  banner?: boolean;
  icon?: React.ReactNode;
-  /** Custome closeIcon */
+  /** Custom closeIcon */
  closeIcon?: React.ReactNode;
  action?: React.ReactNode;
  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@ -138,7 +138,7 @@ class Anchor extends React.Component<InternalAnchorProps, AnchorState, ConfigCon
    const { getTargetContainer } = this.context;
    const { getContainer } = this.props;

-    const getFunc = getContainer || getTargetContainer || getDefaultContainer;
+    const getFunc = getContainer ?? getTargetContainer ?? getDefaultContainer;

    return getFunc();
  };
--- 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,8 +92,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md extend context c
      class="ant-anchor-ink"
    >
      <span
-        class="ant-anchor-ink-ball visible"
-        style="top: -4.5px;"
+        class="ant-anchor-ink-ball"
      />
    </div>
    <div
@ -108,10 +107,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md extend context c
      </a>
    </div>
    <div
-      class="ant-anchor-link ant-anchor-link-active"
+      class="ant-anchor-link"
    >
      <a
-        class="ant-anchor-link-title ant-anchor-link-title-active"
+        class="ant-anchor-link-title"
        href="#components-anchor-demo-static"
        title="Static demo"
      >
@ -158,7 +157,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"
@ -232,7 +231,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"
@ -306,7 +305,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"
@ -384,7 +383,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,8 +92,7 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] =
      class="ant-anchor-ink"
    >
      <span
-        class="ant-anchor-ink-ball visible"
-        style="top: -4.5px;"
+        class="ant-anchor-ink-ball"
      />
    </div>
    <div
@ -108,10 +107,10 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] =
      </a>
    </div>
    <div
-      class="ant-anchor-link ant-anchor-link-active"
+      class="ant-anchor-link"
    >
      <a
-        class="ant-anchor-link-title ant-anchor-link-title-active"
+        class="ant-anchor-link-title"
        href="#components-anchor-demo-static"
        title="Static demo"
      >
@ -158,7 +157,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"
@ -232,7 +231,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"
@ -306,7 +305,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"
@ -384,7 +383,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,14 +13,13 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="rc_select_test_list_test"
+          aria-activedescendant="undefined_list_0"
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
-          id="rc_select_test"
          role="combobox"
          type="search"
          value=""
@ -37,7 +36,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"
@ -46,14 +45,13 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="rc_select_test_list_test"
+          aria-activedescendant="undefined_list_0"
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_list"
          autocomplete="off"
          class="ant-select-selection-search-input"
-          id="rc_select_test"
          role="combobox"
          type="search"
          value=""
@ -72,7 +70,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"
@ -87,14 +85,13 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
          class="ant-input-wrapper ant-input-group"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_list"
            autocomplete="off"
            class="ant-input ant-input-lg"
-            id="rc_select_test"
            placeholder="input here"
            role="combobox"
            type="search"
@ -141,7 +138,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"
@ -150,17 +147,16 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
      class="ant-select-selection-search"
    >
      <textarea
-        aria-activedescendant="rc_select_test_list_test"
+        aria-activedescendant="undefined_list_0"
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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>
@ -174,7 +170,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: 0px auto;"
+  style="margin:0 auto"
 >
  <div
    class="ant-form-item"
@ -211,14 +207,13 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  class="ant-select-selection-search"
                >
                  <input
-                    aria-activedescendant="rc_select_test_list_test"
+                    aria-activedescendant="undefined_list_0"
                    aria-autocomplete="list"
-                    aria-controls="rc_select_test_list"
+                    aria-controls="undefined_list"
                    aria-haspopup="listbox"
-                    aria-owns="rc_select_test_list"
+                    aria-owns="undefined_list"
                    autocomplete="off"
                    class="ant-select-selection-search-input"
-                    id="rc_select_test"
                    role="combobox"
                    type="search"
                    value=""
@ -270,15 +265,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                >
                  <input
                    aria-autocomplete="list"
-                    aria-controls="rc_select_test_list"
+                    aria-controls="undefined_list"
                    aria-haspopup="listbox"
-                    aria-owns="rc_select_test_list"
+                    aria-owns="undefined_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=""
@ -291,7 +285,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
              <span
                aria-hidden="true"
                class="ant-select-arrow"
-                style="user-select: none;"
+                style="user-select:none;-webkit-user-select:none"
                unselectable="on"
              >
                <span
@ -350,7 +344,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"
@ -360,15 +354,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="rc_select_test_list"
+                      aria-controls="undefined_list"
                      aria-haspopup="listbox"
-                      aria-owns="rc_select_test_list"
+                      aria-owns="undefined_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=""
@ -381,7 +374,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select: none;"
+                  style="user-select:none;-webkit-user-select:none"
                  unselectable="on"
                >
                  <span
@ -415,14 +408,13 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                    class="ant-select-selection-search"
                  >
                    <input
-                      aria-activedescendant="rc_select_test_list_test"
+                      aria-activedescendant="undefined_list_0"
                      aria-autocomplete="list"
-                      aria-controls="rc_select_test_list"
+                      aria-controls="undefined_list"
                      aria-haspopup="listbox"
-                      aria-owns="rc_select_test_list"
+                      aria-owns="undefined_list"
                      autocomplete="off"
                      class="ant-select-selection-search-input"
-                      id="rc_select_test"
                      role="combobox"
                      type="search"
                      value=""
@ -477,14 +469,13 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                    class="ant-input-affix-wrapper ant-select-selection-search-input"
                  >
                    <input
-                      aria-activedescendant="rc_select_test_list_test"
+                      aria-activedescendant="undefined_list_0"
                      aria-autocomplete="list"
-                      aria-controls="rc_select_test_list"
+                      aria-controls="undefined_list"
                      aria-haspopup="listbox"
-                      aria-owns="rc_select_test_list"
+                      aria-owns="undefined_list"
                      autocomplete="off"
                      class="ant-input"
-                      id="rc_select_test"
                      role="combobox"
                      type="search"
                      value=""
@ -554,7 +545,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"
@ -564,15 +555,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="rc_select_test_list"
+                      aria-controls="undefined_list"
                      aria-haspopup="listbox"
-                      aria-owns="rc_select_test_list"
+                      aria-owns="undefined_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=""
@ -585,7 +575,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select: none;"
+                  style="user-select:none;-webkit-user-select:none"
                  unselectable="on"
                >
                  <span
@ -622,14 +612,13 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                      class="ant-input-affix-wrapper ant-select-selection-search-input"
                    >
                      <input
-                        aria-activedescendant="rc_select_test_list_test"
+                        aria-activedescendant="undefined_list_0"
                        aria-autocomplete="list"
-                        aria-controls="rc_select_test_list"
+                        aria-controls="undefined_list"
                        aria-haspopup="listbox"
-                        aria-owns="rc_select_test_list"
+                        aria-owns="undefined_list"
                        autocomplete="off"
                        class="ant-input"
-                        id="rc_select_test"
                        role="combobox"
                        type="search"
                        value=""
@ -700,7 +689,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"
@ -710,15 +699,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="rc_select_test_list"
+                      aria-controls="undefined_list"
                      aria-haspopup="listbox"
-                      aria-owns="rc_select_test_list"
+                      aria-owns="undefined_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=""
@ -731,7 +719,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select: none;"
+                  style="user-select:none;-webkit-user-select:none"
                  unselectable="on"
                >
                  <span
@ -771,14 +759,13 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                        class="ant-input-wrapper ant-input-group"
                      >
                        <input
-                          aria-activedescendant="rc_select_test_list_test"
+                          aria-activedescendant="undefined_list_0"
                          aria-autocomplete="list"
-                          aria-controls="rc_select_test_list"
+                          aria-controls="undefined_list"
                          aria-haspopup="listbox"
-                          aria-owns="rc_select_test_list"
+                          aria-owns="undefined_list"
                          autocomplete="off"
                          class="ant-input"
-                          id="rc_select_test"
                          role="combobox"
                          type="search"
                          value=""
@ -855,7 +842,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"
@ -865,15 +852,14 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                  >
                    <input
                      aria-autocomplete="list"
-                      aria-controls="rc_select_test_list"
+                      aria-controls="undefined_list"
                      aria-haspopup="listbox"
-                      aria-owns="rc_select_test_list"
+                      aria-owns="undefined_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=""
@ -886,7 +872,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                <span
                  aria-hidden="true"
                  class="ant-select-arrow"
-                  style="user-select: none;"
+                  style="user-select:none;-webkit-user-select:none"
                  unselectable="on"
                >
                  <span
@ -926,14 +912,13 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                        class="ant-input-wrapper ant-input-group"
                      >
                        <input
-                          aria-activedescendant="rc_select_test_list_test"
+                          aria-activedescendant="undefined_list_0"
                          aria-autocomplete="list"
-                          aria-controls="rc_select_test_list"
+                          aria-controls="undefined_list"
                          aria-haspopup="listbox"
-                          aria-owns="rc_select_test_list"
+                          aria-owns="undefined_list"
                          autocomplete="off"
                          class="ant-input"
-                          id="rc_select_test"
                          role="combobox"
                          type="search"
                          value=""
@ -1013,7 +998,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"
@ -1022,14 +1007,13 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
      class="ant-select-selection-search"
    >
      <input
-        aria-activedescendant="rc_select_test_list_test"
+        aria-activedescendant="undefined_list_0"
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
-        id="rc_select_test"
        role="combobox"
        type="search"
        value=""
@ -1047,7 +1031,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"
@ -1056,14 +1040,13 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
      class="ant-select-selection-search"
    >
      <input
-        aria-activedescendant="rc_select_test_list_test"
+        aria-activedescendant="undefined_list_0"
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
-        id="rc_select_test"
        role="combobox"
        type="search"
        value=""
@ -1081,11 +1064,11 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 exports[`renders ./components/auto-complete/demo/render-panel.md correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
-  style="display: flex;"
+  style="display:flex"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom: 8px;"
+    style="margin-bottom:8px"
  >
    <button
      aria-checked="false"
@ -1098,25 +1081,18 @@ exports[`renders ./components/auto-complete/demo/render-panel.md correctly 1`] =
      />
      <span
        class="ant-switch-inner"
-      >
-        <span
-          class="ant-switch-inner-checked"
-        />
-        <span
-          class="ant-switch-inner-unchecked"
-        />
-      </span>
+      />
    </button>
  </div>
  <div
    class="ant-space-item"
  >
    <div
-      style="padding-bottom: 0px; position: relative; min-width: 0;"
+      style="padding-bottom:0;position:relative;width:fit-content;min-width:0"
    >
      <div
        class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
-        style="width: 120px; margin: 0px;"
+        style="width:120px;margin:0"
      >
        <div
          class="ant-select-selector"
@ -1125,15 +1101,14 @@ exports[`renders ./components/auto-complete/demo/render-panel.md correctly 1`] =
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="rc_select_test_list_test"
+              aria-activedescendant="undefined_list_0"
              aria-autocomplete="list"
-              aria-controls="rc_select_test_list"
+              aria-controls="undefined_list"
              aria-expanded="false"
              aria-haspopup="listbox"
-              aria-owns="rc_select_test_list"
+              aria-owns="undefined_list"
              autocomplete="off"
              class="ant-select-selection-search-input"
-              id="rc_select_test"
              role="combobox"
              type="search"
              value="lucy"
@ -1149,15 +1124,15 @@ exports[`renders ./components/auto-complete/demo/render-panel.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"
@ -1166,14 +1141,13 @@ exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
-            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -1190,7 +1164,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"
@ -1199,14 +1173,13 @@ exports[`renders ./components/auto-complete/demo/status.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
-            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -1224,7 +1197,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"
@ -1239,14 +1212,13 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
          class="ant-input-wrapper ant-input-group"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_list"
            autocomplete="off"
            class="ant-input ant-input-lg"
-            id="rc_select_test"
            placeholder="input here"
            role="combobox"
            type="search"
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@ -7,39 +7,39 @@ title:

 ## zh-CN

-也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `options`。
+可以返回自定义的 `Option` label

 ## en-US

-You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
+You could set custom `Option` label

 ```tsx
 import { AutoComplete } from 'antd';
 import React, { useState } from 'react';

-const { Option } = AutoComplete;
-
 const App: React.FC = () => {
-  const [result, setResult] = useState<string[]>([]);
+  const [options, setOptions] = useState<{ value: string; label: string }[]>([]);

  const handleSearch = (value: string) => {
-    let res: string[] = [];
+    let res: { value: string; label: string }[] = [];
    if (!value || value.indexOf('@') >= 0) {
      res = [];
    } else {
-      res = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
+      res = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
+        value,
+        label: `${value}@${domain}`,
+      }));
    }
-    setResult(res);
+    setOptions(res);
  };

  return (
-    <AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
-      {result.map((email: string) => (
-        <Option key={email} value={email}>
-          {email}
-        </Option>
-      ))}
-    </AutoComplete>
+    <AutoComplete
+      style={{ width: 200 }}
+      onSearch={handleSearch}
+      placeholder="input here"
+      options={options}
+    />
  );
 };

--- 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: rgb(245, 106, 0); vertical-align: middle;"
+    style="background-color:#f56a00;vertical-align:middle"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      U
    </span>
  </span>,
  <button
    class="ant-btn ant-btn-default ant-btn-sm"
-    style="margin: 0px 16px; vertical-align: middle;"
+    style="margin:0 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: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="background-color: rgb(135, 208, 104);"
+      style="background-color:#87d068"
    >
      <span
        aria-label="user"
@ -382,8 +382,8 @@ Array [
    </span>
    <div>
      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-        style="opacity: 0;"
+        class="ant-tooltip"
+        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: rgb(24, 144, 255);"
+      style="background-color:#1890ff"
    >
      <span
        aria-label="ant-design"
@ -445,30 +445,30 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="background-color: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
+      style="color:#f56a00;background-color:#fde3cf"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        +2
      </span>
    </span>
    <div>
      <div
-        class="ant-popover ant-avatar-group-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
-        style="opacity: 0;"
+        class="ant-popover ant-avatar-group-popover"
+        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: rgb(135, 208, 104);"
+                style="background-color:#87d068"
              >
                <span
                  aria-label="user"
@ -513,8 +513,8 @@ Array [
              </span>
              <div>
                <div
-                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-                  style="opacity: 0;"
+                  class="ant-tooltip"
+                  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: rgb(24, 144, 255);"
+                style="background-color:#1890ff"
              >
                <span
                  aria-label="ant-design"
@ -581,30 +581,30 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
+      style="color:#f56a00;background-color:#fde3cf"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        +2
      </span>
    </span>
    <div>
      <div
-        class="ant-popover ant-avatar-group-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
-        style="opacity: 0;"
+        class="ant-popover ant-avatar-group-popover"
+        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: rgb(135, 208, 104);"
+                style="background-color:#87d068"
              >
                <span
                  aria-label="user"
@ -649,8 +649,8 @@ Array [
              </span>
              <div>
                <div
-                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-                  style="opacity: 0;"
+                  class="ant-tooltip"
+                  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: rgb(24, 144, 255);"
+                style="background-color:#1890ff"
              >
                <span
                  aria-label="ant-design"
@ -717,30 +717,30 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207); cursor: pointer;"
+      style="color:#f56a00;background-color:#fde3cf;cursor:pointer"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        +2
      </span>
    </span>
    <div>
      <div
-        class="ant-popover ant-avatar-group-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big"
-        style="opacity: 0;"
+        class="ant-popover ant-avatar-group-popover"
+        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: rgb(135, 208, 104);"
+                style="background-color:#87d068"
              >
                <span
                  aria-label="user"
@ -785,8 +785,8 @@ Array [
              </span>
              <div>
                <div
-                  class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-                  style="opacity: 0;"
+                  class="ant-tooltip"
+                  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: rgb(24, 144, 255);"
+                style="background-color:#1890ff"
              >
                <span
                  aria-label="ant-design"
@ -843,7 +843,6 @@ 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"
@ -896,44 +895,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: rgb(114, 101, 230); display: none;"
+      style="background:#7265e6;display:none"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        Avatar
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-      style="background: rgb(0, 162, 174); display: none;"
+      style="background:#00a2ae;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: rgb(114, 101, 230);"
+        style="background:#7265e6"
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="opacity:0"
        >
          Avatar
        </span>
      </span>
      <span
        class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-        style="background: rgb(0, 162, 174);"
+        style="background:#00a2ae"
      >
        <img
          src="invalid"
@ -974,18 +973,18 @@ Array [
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      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="line-height: 40px; transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      USER
    </span>
@ -1006,7 +1005,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"
@ -1040,18 +1039,18 @@ Array [
  </span>,
  <span
    class="ant-avatar ant-avatar-circle"
-    style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
+    style="color:#f56a00;background-color:#fde3cf"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      U
    </span>
  </span>,
  <span
    class="ant-avatar ant-avatar-circle ant-avatar-icon"
-    style="background-color: rgb(135, 208, 104);"
+    style="background-color:#87d068"
  >
    <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: rgb(245, 106, 0); vertical-align: middle;"
+    style="background-color:#f56a00;vertical-align:middle"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      U
    </span>
  </span>,
  <button
    class="ant-btn ant-btn-default ant-btn-sm"
-    style="margin: 0px 16px; vertical-align: middle;"
+    style="margin:0 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: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="background-color: rgb(135, 208, 104);"
+      style="background-color:#87d068"
    >
      <span
        aria-label="user"
@ -382,7 +382,7 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle ant-avatar-icon"
-      style="background-color: rgb(24, 144, 255);"
+      style="background-color:#1890ff"
    >
      <span
        aria-label="ant-design"
@ -421,22 +421,22 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="background-color: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-circle"
-      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
+      style="color:#f56a00;background-color:#fde3cf"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        +2
      </span>
@ -458,22 +458,22 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
+      style="color:#f56a00;background-color:#fde3cf"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        +2
      </span>
@ -495,22 +495,22 @@ Array [
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="background-color: rgb(245, 106, 0);"
+      style="background-color:#f56a00"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        K
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle"
-      style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207); cursor: pointer;"
+      style="color:#f56a00;background-color:#fde3cf;cursor:pointer"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        +2
      </span>
@ -522,7 +522,6 @@ 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"
@ -575,44 +574,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: rgb(114, 101, 230); display: none;"
+      style="background:#7265e6;display:none"
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="opacity:0"
      >
        Avatar
      </span>
    </span>
    <span
      class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-      style="background: rgb(0, 162, 174); display: none;"
+      style="background:#00a2ae;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: rgb(114, 101, 230);"
+        style="background:#7265e6"
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="opacity:0"
        >
          Avatar
        </span>
      </span>
      <span
        class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
-        style="background: rgb(0, 162, 174);"
+        style="background:#00a2ae"
      >
        <img
          src="invalid"
@ -653,18 +652,18 @@ Array [
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      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="line-height: 40px; transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      USER
    </span>
@ -685,7 +684,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"
@ -719,18 +718,18 @@ Array [
  </span>,
  <span
    class="ant-avatar ant-avatar-circle"
-    style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"
+    style="color:#f56a00;background-color:#fde3cf"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="opacity:0"
    >
      U
    </span>
  </span>,
  <span
    class="ant-avatar ant-avatar-circle ant-avatar-icon"
-    style="background-color: rgb(135, 208, 104);"
+    style="background-color:#87d068"
  >
    <span
      aria-label="user"
--- a/components/avatar/avatar.tsx
+++ b/components/avatar/avatar.tsx
@ -39,17 +39,19 @@ export interface AvatarProps {
  onError?: () => boolean;
 }

-const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (props, ref) => {
+const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProps> = (
+  props,
+  ref,
+) => {
  const groupSize = React.useContext(SizeContext);

  const [scale, setScale] = React.useState(1);
  const [mounted, setMounted] = React.useState(false);
  const [isImgExist, setIsImgExist] = React.useState(true);

-  const avatarNodeRef = React.useRef<HTMLElement>();
-  const avatarChildrenRef = React.useRef<HTMLElement>();
-
-  const avatarNodeMergeRef = composeRef(ref, avatarNodeRef);
+  const avatarNodeRef = React.useRef<HTMLSpanElement>(null);
+  const avatarChildrenRef = React.useRef<HTMLSpanElement>(null);
+  const avatarNodeMergeRef = composeRef<HTMLSpanElement>(ref, avatarNodeRef);

  const { getPrefixCls } = React.useContext(ConfigContext);

@ -91,8 +93,8 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr

  const {
    prefixCls: customizePrefixCls,
-    shape,
-    size: customSize,
+    shape = 'circle',
+    size: customSize = 'default',
    src,
    srcSet,
    icon,
@ -166,7 +168,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
        }
      : {};

-  let childrenToRender;
+  let childrenToRender: React.ReactNode;
  if (typeof src === 'string' && isImgExist) {
    childrenToRender = (
      <img
@ -201,9 +203,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
      <ResizeObserver onResize={setScaleParam}>
        <span
          className={`${prefixCls}-string`}
-          ref={(node: HTMLElement) => {
-            avatarChildrenRef.current = node;
-          }}
+          ref={avatarChildrenRef}
          style={{ ...sizeChildrenStyle, ...childrenStyle }}
        >
          {children}
@ -212,13 +212,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
    );
  } else {
    childrenToRender = (
-      <span
-        className={`${prefixCls}-string`}
-        style={{ opacity: 0 }}
-        ref={(node: HTMLElement) => {
-          avatarChildrenRef.current = node;
-        }}
-      >
+      <span className={`${prefixCls}-string`} style={{ opacity: 0 }} ref={avatarChildrenRef}>
        {children}
      </span>
    );
@ -234,21 +228,17 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
      {...others}
      style={{ ...sizeStyle, ...responsiveSizeStyle, ...others.style }}
      className={classString}
-      ref={avatarNodeMergeRef as any}
+      ref={avatarNodeMergeRef}
    >
      {childrenToRender}
    </span>,
  );
 };

-const Avatar = React.forwardRef<unknown, AvatarProps>(InternalAvatar);
+const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(InternalAvatar);
+
 if (process.env.NODE_ENV !== 'production') {
  Avatar.displayName = 'Avatar';
 }

-Avatar.defaultProps = {
-  shape: 'circle' as AvatarProps['shape'],
-  size: 'default' as AvatarProps['size'],
-};
-
 export default Avatar;
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@ -7,12 +7,14 @@ export { AvatarProps } from './avatar';
 export { GroupProps } from './group';
 export { Group };

-interface CompoundedComponent
-  extends ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLElement>> {
+type CompoundedComponent = ForwardRefExoticComponent<
+  AvatarProps & RefAttributes<HTMLSpanElement>
+> & {
  Group: typeof Group;
-}
+};

 const Avatar = InternalAvatar as CompoundedComponent;
+
 Avatar.Group = Group;

 export default Avatar;
--- a/components/back-top/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/back-top/tests/snapshots/demo-extend.test.ts.snap
@ -5,17 +5,19 @@ Array [
  <div
    class="ant-back-top"
  />,
+  Scroll down to see the bottom-right,
  <strong
    class="site-back-top-basic"
  >
-     gray 
+     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,17 +5,19 @@ Array [
  <div
    class="ant-back-top"
  />,
+  Scroll down to see the bottom-right,
  <strong
    class="site-back-top-basic"
  >
-     gray 
+     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
--- a/components/badge/tests/snapshots/demo.test.ts.snap
+++ b/components/badge/tests/snapshots/demo.test.ts.snap
--- a/components/badge/tests/snapshots/index.test.tsx.snap
+++ b/components/badge/tests/snapshots/index.test.tsx.snap
@ -3,7 +3,7 @@
 exports[`Badge render Badge status/color when contains children 1`] = `
 <div>
  <span
-    class="ant-badge ant-badge-status"
+    class="ant-badge"
  >
    <a />
    <sup
@ -24,7 +24,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
    </sup>
  </span>
  <span
-    class="ant-badge ant-badge-status"
+    class="ant-badge"
  >
    <a />
    <sup
@ -45,7 +45,7 @@ exports[`Badge render Badge status/color when contains children 1`] = `
    </sup>
  </span>
  <span
-    class="ant-badge ant-badge-status"
+    class="ant-badge"
  >
    <a />
    <sup
--- a/components/badge/tests/index.test.tsx
+++ b/components/badge/tests/index.test.tsx
@ -166,6 +166,20 @@ describe('Badge', () => {
    expect(container.querySelectorAll('.ant-badge')).toHaveLength(2);
  });

+  it('Badge should display count when color and count are both exist', () => {
+    const { container } = render(
+      <>
+        <Badge className="badge1" text="badge" color="pink" count={44} />
+        <Badge className="badge2" text="badge" color="pink" count={0} />
+        <Badge className="badge3" text="badge" color="pink" />
+      </>,
+    );
+
+    expect(container.querySelectorAll('.ant-badge-count')).toHaveLength(1);
+    expect(container.querySelectorAll('[title="44"]')).toHaveLength(1);
+    expect(container.querySelectorAll('.ant-badge-status-dot')).toHaveLength(2);
+  });
+
  it('Badge not render status-text when text is empty string', () => {
    const { container } = render(<Badge status="default" text={undefined} />);

--- a/components/badge/demo/colorful-with-count-debug.md
+++ b/components/badge/demo/colorful-with-count-debug.md
@ -0,0 +1,67 @@
+---
+order: 101
+title:
+  zh-CN: 多彩徽标支持 count 显示 Debug
+  en-US: Colorful Badge support count Debug
+debug: true
+---
+
+## zh-CN
+
+在使用多彩徽标的同时，支持 count 属性显示
+
+## en-US
+
+support `count` when use colorful badge
+
+```tsx
+import { Badge } from 'antd';
+import React from 'react';
+
+const colors = [
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime',
+];
+
+const App: React.FC = () => (
+  <>
+    {colors.map(color => (
+      <div key={color} style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+        <Badge color={color} count={44}>
+          <div
+            style={{
+              width: 90,
+              height: 90,
+              lineHeight: '90px',
+              background: '#ccc',
+              textAlign: 'center',
+              marginBottom: 10,
+            }}
+          >
+            {color}
+          </div>
+        </Badge>
+      </div>
+    ))}
+  </>
+);
+
+export default App;
+```
+
+```css
+.ant-tag {
+  margin-bottom: 8px;
+}
+```
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@ -67,11 +67,14 @@ const Badge: CompoundedComponent = ({
    (count as number) > (overflowCount as number) ? `${overflowCount}+` : count
  ) as string | number | null;

-  const hasStatus =
-    (status !== null && status !== undefined) || (color !== null && color !== undefined);
-
  const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;

+  const ignoreCount = count === null || (count !== null && isZero);
+
+  const hasStatus =
+    ((status !== null && status !== undefined) || (color !== null && color !== undefined)) &&
+    ignoreCount;
+
  const showAsDot = dot && !isZero;

  const mergedCount = showAsDot ? '' : numberedDisplayCount;
--- a/components/breadcrumb/BreadcrumbSeparator.tsx
+++ b/components/breadcrumb/BreadcrumbSeparator.tsx
@ -2,6 +2,7 @@ import * as React from 'react';
 import { ConfigContext } from '../config-provider';

 interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
+  /** @internal */
  __ANT_BREADCRUMB_SEPARATOR: boolean;
 }

--- a/components/breadcrumb/tests/Breadcrumb.test.tsx
+++ b/components/breadcrumb/tests/Breadcrumb.test.tsx
@ -21,7 +21,6 @@ describe('Breadcrumb', () => {
    errorSpy.mockRestore();
  });

-  // https://github.com/airbnb/enzyme/issues/875
  it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
    const MyCom: React.FC = () => <div>foo</div>;
    render(
--- 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 ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-          style="opacity: 0;"
+          class="ant-dropdown"
+          style="opacity:0"
        >
          <ul
            class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -144,7 +144,6 @@ 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"
            >
@ -162,8 +161,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </li>
            <div>
              <div
-                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;"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
              >
                <div
                  class="ant-tooltip-content"
@ -184,7 +183,6 @@ 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"
            >
@ -202,8 +200,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </li>
            <div>
              <div
-                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;"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
              >
                <div
                  class="ant-tooltip-content"
@ -224,7 +222,6 @@ 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"
            >
@ -242,8 +239,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </li>
            <div>
              <div
-                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;"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
              >
                <div
                  class="ant-tooltip-content"
@ -265,12 +262,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 ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-                style="opacity: 0;"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
              >
                <div
                  class="ant-tooltip-content"
@ -291,8 +288,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </div>
            <div>
              <div
-                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;"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
              >
                <div
                  class="ant-tooltip-content"
@ -313,8 +310,8 @@ exports[`renders ./components/breadcrumb/demo/overlay.md extend context correctl
            </div>
            <div>
              <div
-                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;"
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
              >
                <div
                  class="ant-tooltip-content"
--- a/components/breadcrumb/tests/router.test.tsx
+++ b/components/breadcrumb/tests/router.test.tsx
@ -32,7 +32,6 @@ describe('react router', () => {
    jest.useRealTimers();
  });

-  // https://github.com/airbnb/enzyme/issues/875
  it('react router 6', () => {
    const Home: React.FC = () => {
      const location = useLocation();
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@ -91,11 +91,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -123,11 +122,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -153,11 +151,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -185,11 +182,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -244,11 +240,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -554,8 +549,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -637,8 +632,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -713,8 +708,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -788,8 +783,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -889,8 +884,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -972,8 +967,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -1048,8 +1043,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -1123,8 +1118,8 @@ Array [
  </button>,
  <div>
    <div
-      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-      style="opacity: 0;"
+      class="ant-tooltip"
+      style="opacity:0"
    >
      <div
        class="ant-tooltip-content"
@ -1223,12 +1218,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
@ -1254,8 +1249,8 @@ Array [
      </span>
      <div>
        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-          style="opacity: 0;"
+          class="ant-tooltip"
+          style="opacity:0"
        >
          <div
            class="ant-tooltip-content"
@ -1302,8 +1297,8 @@ Array [
      </button>
      <div>
        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-          style="opacity: 0;"
+          class="ant-tooltip"
+          style="opacity:0"
        >
          <div
            class="ant-tooltip-content"
@ -1349,12 +1344,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
@ -1380,8 +1375,8 @@ Array [
      </span>
      <div>
        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-          style="opacity: 0;"
+          class="ant-tooltip"
+          style="opacity:0"
        >
          <div
            class="ant-tooltip-content"
@ -1428,8 +1423,8 @@ Array [
      </button>
      <div>
        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-          style="opacity: 0;"
+          class="ant-tooltip"
+          style="opacity:0"
        >
          <div
            class="ant-tooltip-content"
@ -1475,12 +1470,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
@ -1506,8 +1501,8 @@ Array [
      </span>
      <div>
        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-          style="opacity: 0;"
+          class="ant-tooltip"
+          style="opacity:0"
        >
          <div
            class="ant-tooltip-content"
@ -1554,8 +1549,8 @@ Array [
      </button>
      <div>
        <div
-          class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-          style="opacity: 0;"
+          class="ant-tooltip"
+          style="opacity:0"
        >
          <div
            class="ant-tooltip-content"
@ -1585,11 +1580,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"
@ -1597,11 +1592,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
            role="img"
          >
            <svg
@ -1626,7 +1620,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"
@ -1634,11 +1628,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
            role="img"
          >
            <svg
@ -1696,11 +1689,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"
@ -1713,7 +1706,7 @@ Array [
    </div>
    <div
      class="ant-space-item"
-      style="margin-right: 8px;"
+      style="margin-right:8px"
    >
      <button
        class="ant-btn ant-btn-primary"
@ -1830,8 +1823,8 @@ Array [
    </button>
    <div>
      <div
-        class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-        style="opacity: 0;"
+        class="ant-dropdown"
+        style="opacity:0"
      >
        <ul
          class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -1841,7 +1834,6 @@ 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"
          >
@ -1853,8 +1845,8 @@ Array [
          </li>
          <div>
            <div
-              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;"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+              style="opacity:0"
            >
              <div
                class="ant-tooltip-content"
@ -1875,7 +1867,6 @@ 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"
          >
@ -1887,8 +1878,8 @@ Array [
          </li>
          <div>
            <div
-              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;"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+              style="opacity:0"
            >
              <div
                class="ant-tooltip-content"
@ -1909,7 +1900,6 @@ 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"
          >
@ -1921,8 +1911,8 @@ Array [
          </li>
          <div>
            <div
-              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;"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+              style="opacity:0"
            >
              <div
                class="ant-tooltip-content"
@ -1944,12 +1934,12 @@ Array [
        </ul>
        <div
          aria-hidden="true"
-          style="display: none;"
+          style="display:none"
        >
          <div>
            <div
-              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;"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+              style="opacity:0"
            >
              <div
                class="ant-tooltip-content"
@ -1970,8 +1960,8 @@ Array [
          </div>
          <div>
            <div
-              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;"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+              style="opacity:0"
            >
              <div
                class="ant-tooltip-content"
@ -1992,8 +1982,8 @@ Array [
          </div>
          <div>
            <div
-              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;"
+              class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+              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,11 +91,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -123,11 +122,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -153,11 +151,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -185,11 +182,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -244,11 +240,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+        class="anticon anticon-loading anticon-spin"
        role="img"
      >
        <svg
@ -1031,12 +1026,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
@ -1109,12 +1104,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
@ -1187,12 +1182,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
@ -1249,11 +1244,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"
@ -1261,11 +1256,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
            role="img"
          >
            <svg
@ -1290,7 +1284,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"
@ -1298,11 +1292,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
            role="img"
          >
            <svg
@ -1360,11 +1353,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"
@ -1377,7 +1370,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
@ -137,6 +137,7 @@ export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
 interface CompoundedComponent
  extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> {
  Group: typeof Group;
+  /** @internal */
  __ANT_BUTTON: boolean;
 }

@ -171,7 +172,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
  const size = React.useContext(SizeContext);
  // ===================== Disabled =====================
  const disabled = React.useContext(DisabledContext);
-  const mergedDisabled = customDisabled || disabled;
+  const mergedDisabled = customDisabled ?? disabled;

  const groupSize = React.useContext(GroupSizeContext);
  const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
--- 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.ts.snap
+++ b/components/calendar/tests/snapshots/demo.test.ts.snap
@ -17,17 +17,16 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -43,7 +42,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -77,17 +76,16 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -103,7 +101,7 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -964,17 +962,16 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="rc_select_test_list_test"
+              aria-activedescendant="undefined_list_0"
              aria-autocomplete="list"
-              aria-controls="rc_select_test_list"
+              aria-controls="undefined_list"
              aria-haspopup="listbox"
-              aria-owns="rc_select_test_list"
+              aria-owns="undefined_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=""
@ -990,7 +987,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select: none;"
+          style="user-select:none;-webkit-user-select:none"
          unselectable="on"
        >
          <span
@ -1024,17 +1021,16 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="rc_select_test_list_test"
+              aria-activedescendant="undefined_list_0"
              aria-autocomplete="list"
-              aria-controls="rc_select_test_list"
+              aria-controls="undefined_list"
              aria-haspopup="listbox"
-              aria-owns="rc_select_test_list"
+              aria-owns="undefined_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=""
@ -1050,7 +1046,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select: none;"
+          style="user-select:none;-webkit-user-select:none"
          unselectable="on"
        >
          <span
@ -1900,7 +1896,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"
@ -1909,11 +1905,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"
@ -1961,7 +1957,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"
@ -1973,17 +1969,16 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="rc_select_test_list_test"
+                  aria-activedescendant="undefined_list_0"
                  aria-autocomplete="list"
-                  aria-controls="rc_select_test_list"
+                  aria-controls="undefined_list"
                  aria-haspopup="listbox"
-                  aria-owns="rc_select_test_list"
+                  aria-owns="undefined_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=""
@ -1999,7 +1994,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select: none;"
+              style="user-select:none;-webkit-user-select:none"
              unselectable="on"
            >
              <span
@ -2026,7 +2021,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"
@ -2038,17 +2033,16 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
                class="ant-select-selection-search"
              >
                <input
-                  aria-activedescendant="rc_select_test_list_test"
+                  aria-activedescendant="undefined_list_0"
                  aria-autocomplete="list"
-                  aria-controls="rc_select_test_list"
+                  aria-controls="undefined_list"
                  aria-haspopup="listbox"
-                  aria-owns="rc_select_test_list"
+                  aria-owns="undefined_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=""
@ -2064,7 +2058,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
            <span
              aria-hidden="true"
              class="ant-select-arrow"
-              style="user-select: none;"
+              style="user-select:none;-webkit-user-select:none"
              unselectable="on"
            >
              <span
@ -2882,17 +2876,16 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -2908,7 +2901,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -2942,17 +2935,16 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -2968,7 +2960,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -4239,17 +4231,16 @@ Array [
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="rc_select_test_list_test"
+              aria-activedescendant="undefined_list_0"
              aria-autocomplete="list"
-              aria-controls="rc_select_test_list"
+              aria-controls="undefined_list"
              aria-haspopup="listbox"
-              aria-owns="rc_select_test_list"
+              aria-owns="undefined_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=""
@ -4265,7 +4256,7 @@ Array [
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select: none;"
+          style="user-select:none;-webkit-user-select:none"
          unselectable="on"
        >
          <span
@ -4299,17 +4290,16 @@ Array [
            class="ant-select-selection-search"
          >
            <input
-              aria-activedescendant="rc_select_test_list_test"
+              aria-activedescendant="undefined_list_0"
              aria-autocomplete="list"
-              aria-controls="rc_select_test_list"
+              aria-controls="undefined_list"
              aria-haspopup="listbox"
-              aria-owns="rc_select_test_list"
+              aria-owns="undefined_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=""
@ -4325,7 +4315,7 @@ Array [
        <span
          aria-hidden="true"
          class="ant-select-arrow"
-          style="user-select: none;"
+          style="user-select:none;-webkit-user-select:none"
          unselectable="on"
        >
          <span
--- a/components/calendar/tests/snapshots/index.test.js.snap
+++ b/components/calendar/tests/snapshots/index.test.js.snap
--- a/components/calendar/tests/demo.test.ts
+++ b/components/calendar/tests/demo.test.ts
--- a/components/calendar/tests/index.test.js
+++ b/components/calendar/tests/index.test.js
@ -1,430 +0,0 @@
-import Dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
-import { mount } from 'enzyme';
-import MockDate from 'mockdate';
-import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
-import * as React from 'react';
-import Calendar from '..';
-import mountTest from '../../../tests/shared/mountTest';
-import rtlTest from '../../../tests/shared/rtlTest';
-import { fireEvent, render } from '../../../tests/utils';
-import Group from '../../radio/group';
-import Button from '../../radio/radioButton';
-import Select from '../../select';
-import Header from '../Header';
-
-describe('Calendar', () => {
-  mountTest(Calendar);
-  rtlTest(Calendar, { mockDate: true });
-
-  function openSelect(wrapper, className) {
-    wrapper.find(className).find('.ant-select-selector').simulate('mousedown');
-  }
-
-  function findSelectItem(wrapper) {
-    return wrapper.find('.ant-select-item-option');
-  }
-
-  function clickSelectItem(wrapper, index = 0) {
-    findSelectItem(wrapper).at(index).simulate('click');
-  }
-
-  // https://github.com/ant-design/ant-design/issues/30392
-  it('should be able to set undefined or null', () => {
-    expect(() => {
-      const wrapper = mount(<Calendar />);
-      wrapper.setProps({ value: null });
-    }).not.toThrow();
-    expect(() => {
-      const wrapper = mount(<Calendar />);
-      wrapper.setProps({ value: undefined });
-    }).not.toThrow();
-  });
-
-  it('Calendar should be selectable', () => {
-    MockDate.set(Dayjs('2000-01-01').valueOf());
-
-    const onSelect = jest.fn();
-    const onChange = jest.fn();
-    const { container } = render(<Calendar onSelect={onSelect} onChange={onChange} />);
-
-    fireEvent.click(container.querySelector('.ant-picker-cell'));
-    expect(onSelect).toHaveBeenCalledWith(expect.anything());
-
-    const value = onSelect.mock.calls[0][0];
-    expect(Dayjs.isDayjs(value)).toBe(true);
-    expect(onChange).toHaveBeenCalled();
-
-    MockDate.reset();
-  });
-
-  it('only Valid range should be selectable', () => {
-    const onSelect = jest.fn();
-    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
-    const wrapper = mount(
-      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
-    );
-    wrapper.find('[title="2018-02-01"]').at(0).simulate('click');
-    wrapper.find('[title="2018-02-02"]').at(0).simulate('click');
-    expect(onSelect.mock.calls.length).toBe(1);
-  });
-
-  it('dates other than in valid range should be disabled', () => {
-    const onSelect = jest.fn();
-    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
-    const wrapper = mount(
-      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
-    );
-    wrapper.find('[title="2018-02-20"]').at(0).simulate('click');
-    const elem = wrapper.find('[title="2018-02-20"]').hasClass('ant-picker-cell-disabled');
-    expect(elem).toEqual(true);
-    expect(onSelect.mock.calls.length).toBe(0);
-  });
-
-  it('months other than in valid range should be disabled', () => {
-    const onSelect = jest.fn();
-    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
-    const wrapper = mount(
-      <Calendar
-        onSelect={onSelect}
-        validRange={validRange}
-        defaultValue={Dayjs('2018-02-02')}
-        mode="year"
-      />,
-    );
-    expect(wrapper.find('[title="2018-01"]').at(0).hasClass('ant-picker-cell-disabled')).toBe(true);
-    expect(wrapper.find('[title="2018-02"]').at(0).hasClass('ant-picker-cell-disabled')).toBe(
-      false,
-    );
-    expect(wrapper.find('[title="2018-06"]').at(0).hasClass('ant-picker-cell-disabled')).toBe(true);
-    wrapper.find('[title="2018-01"]').at(0).simulate('click');
-    wrapper.find('[title="2018-03"]').at(0).simulate('click');
-    expect(onSelect.mock.calls.length).toBe(1);
-  });
-
-  it('months other than in valid range should not be shown in header', () => {
-    const validRange = [Dayjs('2017-02-02'), Dayjs('2018-05-18')];
-    const wrapper = mount(<Calendar validRange={validRange} />);
-    openSelect(wrapper, '.ant-picker-calendar-year-select');
-    clickSelectItem(wrapper);
-    openSelect(wrapper, '.ant-picker-calendar-month-select');
-    // 2 years and 11 months
-    expect(wrapper.find('.ant-select-item-option').length).toBe(13);
-  });
-
-  it('getDateRange should returns a disabledDate function', () => {
-    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
-    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2018-02-02')} />);
-    const { disabledDate } = wrapper.find('PickerPanel').props();
-    expect(disabledDate(Dayjs('2018-06-02'))).toBe(true);
-    expect(disabledDate(Dayjs('2018-04-02'))).toBe(false);
-  });
-
-  it('validRange should work with disabledDate function', () => {
-    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
-    const wrapper = mount(
-      <Calendar validRange={validRange} disabledDate={data => data.isSame(Dayjs('2018-02-03'))} />,
-    );
-
-    const { disabledDate } = wrapper.find('PickerPanel').props();
-    expect(disabledDate(Dayjs('2018-02-01'))).toBe(true);
-    expect(disabledDate(Dayjs('2018-02-02'))).toBe(false);
-    expect(disabledDate(Dayjs('2018-02-03'))).toBe(true);
-    expect(disabledDate(Dayjs('2018-02-04'))).toBe(false);
-    expect(disabledDate(Dayjs('2018-06-01'))).toBe(true);
-  });
-
-  it('Calendar MonthSelect should display correct label', () => {
-    const validRange = [Dayjs('2018-02-02'), Dayjs('2019-06-1')];
-    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2019-01-01')} />);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
-  it('Calendar should change mode by prop', () => {
-    const monthMode = 'month';
-    const yearMode = 'year';
-    const wrapper = mount(<Calendar />);
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(monthMode);
-    wrapper.setProps({ mode: yearMode });
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(yearMode);
-  });
-
-  it('Calendar should switch mode', () => {
-    const monthMode = 'month';
-    const yearMode = 'year';
-    const onPanelChangeStub = jest.fn();
-    const wrapper = mount(<Calendar mode={yearMode} onPanelChange={onPanelChangeStub} />);
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(yearMode);
-    wrapper.setProps({ mode: monthMode });
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(monthMode);
-    expect(onPanelChangeStub).toHaveBeenCalledTimes(0);
-  });
-
-  it('Calendar should support locale', () => {
-    MockDate.set(Dayjs('2018-10-19').valueOf());
-    // eslint-disable-next-line global-require
-    const zhCN = require('../locale/zh_CN').default;
-    const wrapper = mount(<Calendar locale={zhCN} />);
-    expect(wrapper.render()).toMatchSnapshot();
-    MockDate.reset();
-  });
-
-  describe('onPanelChange', () => {
-    it('trigger when click last month of date', () => {
-      const onPanelChange = jest.fn();
-      const date = new Dayjs('1990-09-03');
-      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
-
-      wrapper.find('.ant-picker-cell').at(0).simulate('click');
-
-      expect(onPanelChange).toHaveBeenCalled();
-      expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
-    });
-
-    it('not trigger when in same month', () => {
-      const onPanelChange = jest.fn();
-      const date = new Dayjs('1990-09-03');
-      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
-
-      wrapper.find('.ant-picker-cell').at(10).simulate('click');
-
-      expect(onPanelChange).not.toHaveBeenCalled();
-    });
-  });
-
-  it('switch should work correctly without prop mode', async () => {
-    const onPanelChange = jest.fn();
-    const date = new Dayjs(new Date(Date.UTC(2017, 7, 9, 8)));
-    const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
-
-    expect(wrapper.find('CalendarHeader').props().mode).toBe('month');
-    expect(wrapper.find('.ant-picker-date-panel').length).toBe(1);
-    expect(wrapper.find('.ant-picker-month-panel').length).toBe(0);
-
-    wrapper.find('.ant-radio-button-input[value="year"]').simulate('change');
-    expect(wrapper.find('.ant-picker-date-panel').length).toBe(0);
-    expect(wrapper.find('.ant-picker-month-panel').length).toBe(1);
-    expect(onPanelChange).toHaveBeenCalled();
-    expect(onPanelChange.mock.calls[0][1]).toEqual('year');
-  });
-
-  const createWrapper = (start, end, value, onValueChange) => {
-    const wrapper = mount(
-      <Header
-        prefixCls="ant-picker-calendar"
-        generateConfig={dayjsGenerateConfig}
-        onChange={onValueChange}
-        value={value}
-        validRange={[start, end]}
-        locale={{ year: '年' }}
-      />,
-    );
-    openSelect(wrapper, '.ant-picker-calendar-year-select');
-    clickSelectItem(wrapper);
-  };
-
-  it('if value.month > end.month, set value.month to end.month', () => {
-    const value = new Dayjs('1990-01-03');
-    const start = new Dayjs('2019-04-01');
-    const end = new Dayjs('2019-11-01');
-    const onValueChange = jest.fn();
-    createWrapper(start, end, value, onValueChange);
-    expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('3'));
-  });
-
-  it('if start.month > value.month, set value.month to start.month', () => {
-    const value = new Dayjs('1990-01-03');
-    const start = new Dayjs('2019-11-01');
-    const end = new Dayjs('2019-03-01');
-    const onValueChange = jest.fn();
-    createWrapper(start, end, value, onValueChange);
-    expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('10'));
-  });
-
-  it('if change year and new month > end month, set value.month to end.month', () => {
-    const value = new Dayjs('2018-11-03');
-    const start = new Dayjs('2000-01-01');
-    const end = new Dayjs('2019-03-01');
-    const onValueChange = jest.fn();
-    const wrapper = mount(
-      <Header
-        prefixCls="ant-picker-calendar"
-        generateConfig={dayjsGenerateConfig}
-        onChange={onValueChange}
-        value={value}
-        validRange={[start, end]}
-        locale={{ year: '年' }}
-      />,
-    );
-    openSelect(wrapper, '.ant-picker-calendar-year-select');
-    wrapper.find('.ant-select-item-option').last().simulate('click');
-    expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('2'));
-  });
-
-  it('onMonthChange should work correctly', () => {
-    const start = new Dayjs('2018-11-01');
-    const end = new Dayjs('2019-03-01');
-    const value = new Dayjs('2018-12-03');
-    const onValueChange = jest.fn();
-    const wrapper = mount(
-      <Header
-        prefixCls="ant-picker-calendar"
-        generateConfig={dayjsGenerateConfig}
-        onChange={onValueChange}
-        value={value}
-        validRange={[start, end]}
-        locale={{ year: '年', locale: 'zh_CN' }}
-        mode="month"
-      />,
-    );
-    openSelect(wrapper, '.ant-picker-calendar-month-select');
-    clickSelectItem(wrapper);
-    expect(onValueChange).toHaveBeenCalledWith(value.month(10));
-  });
-
-  it('onTypeChange should work correctly', () => {
-    const onTypeChange = jest.fn();
-    const value = new Dayjs('2018-12-03');
-    const wrapper = mount(
-      <Header
-        prefixCls="ant-picker-calendar"
-        generateConfig={dayjsGenerateConfig}
-        onModeChange={onTypeChange}
-        locale={{ year: '年', month: '月', locale: 'zh_CN' }}
-        value={value}
-        type="date"
-      />,
-    );
-    wrapper.find('input[type="radio"]').at(1).simulate('change');
-    expect(onTypeChange).toHaveBeenCalledWith('year');
-  });
-
-  it('headerRender should work correctly', () => {
-    const onMonthChange = jest.fn();
-    const onYearChange = jest.fn();
-    const onTypeChange = jest.fn();
-
-    // Year
-    const headerRender = jest.fn(({ value }) => {
-      const year = value.year();
-      const options = [];
-      for (let i = year - 100; i < year + 100; i += 1) {
-        options.push(
-          <Select.Option className="year-item" key={i} value={i}>
-            {i}
-          </Select.Option>,
-        );
-      }
-
-      return (
-        <Select
-          size="small"
-          dropdownMatchSelectWidth={false}
-          className="my-year-select"
-          onChange={onYearChange}
-          value={String(year)}
-        >
-          {options}
-        </Select>
-      );
-    });
-    const wrapperWithYear = mount(<Calendar fullscreen={false} headerRender={headerRender} />);
-
-    openSelect(wrapperWithYear, '.ant-select');
-    wrapperWithYear.update();
-
-    findSelectItem(wrapperWithYear).last().simulate('click');
-
-    expect(onYearChange).toHaveBeenCalled();
-
-    // Month
-    const headerRenderWithMonth = jest.fn(({ value }) => {
-      const start = 0;
-      const end = 12;
-      const monthOptions = [];
-      const current = value.clone();
-      const localeData = value.localeData();
-      const months = [];
-      for (let i = 0; i < 12; i += 1) {
-        current.month(i);
-        months.push(localeData.monthsShort(current));
-      }
-
-      for (let index = start; index < end; index += 1) {
-        monthOptions.push(
-          <Select.Option className="month-item" key={`${index}`} value={index}>
-            {months[index]}
-          </Select.Option>,
-        );
-      }
-
-      const month = value.month();
-      return (
-        <Select
-          size="small"
-          dropdownMatchSelectWidth={false}
-          className="my-month-select"
-          onChange={onMonthChange}
-          value={String(month)}
-        >
-          {monthOptions}
-        </Select>
-      );
-    });
-    const wrapperWithMonth = mount(
-      <Calendar fullscreen={false} headerRender={headerRenderWithMonth} />,
-    );
-
-    openSelect(wrapperWithMonth, '.ant-select');
-    wrapperWithMonth.update();
-
-    findSelectItem(wrapperWithMonth).last().simulate('click');
-
-    expect(onMonthChange).toHaveBeenCalled();
-
-    // Type
-    const headerRenderWithTypeChange = jest.fn(({ type }) => (
-      <Group size="small" onChange={onTypeChange} value={type}>
-        <Button value="month">Month</Button>
-        <Button value="year">Year</Button>
-      </Group>
-    ));
-
-    const wrapperWithTypeChange = mount(
-      <Calendar fullscreen={false} headerRender={headerRenderWithTypeChange} />,
-    );
-
-    wrapperWithTypeChange.find('.ant-radio-button-input').last().simulate('change');
-    expect(onTypeChange).toHaveBeenCalled();
-  });
-
-  it('dateFullCellRender', () => {
-    const wrapper = mount(
-      <Calendar dateFullCellRender={() => <div className="light">Bamboo</div>} />,
-    );
-    expect(wrapper.find('.light').first().text()).toEqual('Bamboo');
-  });
-
-  it('monthFullCellRender', () => {
-    const wrapper = mount(
-      <Calendar mode="year" monthFullCellRender={() => <div className="bamboo">Light</div>} />,
-    );
-    expect(wrapper.find('.bamboo').first().text()).toEqual('Light');
-  });
-
-  it('when fullscreen is false, the element returned by dateFullCellRender should be interactive', () => {
-    const onClick = jest.fn();
-    const wrapper = mount(
-      <Calendar
-        fullscreen={false}
-        dateFullCellRender={() => (
-          <div className="bamboo" onClick={onClick}>
-            Light
-          </div>
-        )}
-      />,
-    );
-    wrapper.find('.bamboo').first().simulate('click');
-    expect(onClick).toHaveBeenCalled();
-  });
-});
--- a/components/calendar/tests/index.test.tsx
+++ b/components/calendar/tests/index.test.tsx
@ -1,9 +1,9 @@
-import { mount } from 'enzyme';
 import MockDate from 'mockdate';
 import Dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import type { Locale } from 'rc-picker/lib/interface';
+import { type PickerPanelProps } from 'rc-picker';
 import React from 'react';
 import Calendar from '..';
 import mountTest from '../../../tests/shared/mountTest';
@ -12,7 +12,36 @@ import { fireEvent, render } from '../../../tests/utils';
 import Group from '../../radio/group';
 import Button from '../../radio/radioButton';
 import Select from '../../select';
-import Header from '../Header';
+import Header, { type CalendarHeaderProps } from '../Header';
+
+function calendarProps(): PickerPanelProps<any> {
+  return (global as any).calendarProps;
+}
+
+function calendarHeaderProps(): CalendarHeaderProps<any> {
+  return (global as any).calendarHeaderProps;
+}
+
+jest.mock('../Header', () => {
+  const HeaderModule = jest.requireActual('../Header');
+  const HeaderComponent = HeaderModule.default;
+  return (props: CalendarHeaderProps<any>) => {
+    (global as any).calendarHeaderProps = props;
+    return <HeaderComponent {...props} />;
+  };
+});
+
+jest.mock('rc-picker', () => {
+  const RcPicker = jest.requireActual('rc-picker');
+  const PickerPanelComponent = RcPicker.PickerPanel;
+  return {
+    ...RcPicker,
+    PickerPanel: (props: PickerPanelProps<any>) => {
+      (global as any).calendarProps = props;
+      return <PickerPanelComponent {...props} />;
+    },
+  };
+});

 describe('Calendar', () => {
  mountTest(Calendar);
@ -33,12 +62,11 @@ describe('Calendar', () => {
  // https://github.com/ant-design/ant-design/issues/30392
  it('should be able to set undefined or null', () => {
    expect(() => {
-      const wrapper = mount(<Calendar />);
-      wrapper.setProps({ value: null });
+      render(<Calendar value={null as any} />);
    }).not.toThrow();
+
    expect(() => {
-      const wrapper = mount(<Calendar />);
-      wrapper.setProps({ value: undefined });
+      render(<Calendar value={undefined} />);
    }).not.toThrow();
  });

@ -63,11 +91,11 @@ describe('Calendar', () => {
  it('only Valid range should be selectable', () => {
    const onSelect = jest.fn();
    const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
-    const wrapper = mount(
+    const wrapper = render(
      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
    );
-    wrapper.find('[title="2018-02-01"]').at(0).simulate('click');
-    wrapper.find('[title="2018-02-02"]').at(0).simulate('click');
+    fireEvent.click(wrapper.container.querySelectorAll('[title="2018-02-01"]')[0]);
+    fireEvent.click(wrapper.container.querySelectorAll('[title="2018-02-02"]')[0]);
    expect(onSelect.mock.calls.length).toBe(1);
  });

@ -122,49 +150,47 @@ describe('Calendar', () => {

  it('getDateRange should returns a disabledDate function', () => {
    const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
-    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2018-02-02')} />);
-    const { disabledDate } = wrapper.find('PickerPanel').props() as any;
-    expect(disabledDate(Dayjs('2018-06-02'))).toBe(true);
-    expect(disabledDate(Dayjs('2018-04-02'))).toBe(false);
+    render(<Calendar validRange={validRange} defaultValue={Dayjs('2018-02-02')} />);
+    expect(calendarProps().disabledDate?.(Dayjs('2018-06-02'))).toBe(true);
+    expect(calendarProps().disabledDate?.(Dayjs('2018-04-02'))).toBe(false);
  });

  it('validRange should work with disabledDate function', () => {
    const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
-    const wrapper = mount(
+    render(
      <Calendar validRange={validRange} disabledDate={data => data.isSame(Dayjs('2018-02-03'))} />,
    );

-    const { disabledDate } = wrapper.find('PickerPanel').props() as any;
-    expect(disabledDate(Dayjs('2018-02-01'))).toBe(true);
-    expect(disabledDate(Dayjs('2018-02-02'))).toBe(false);
-    expect(disabledDate(Dayjs('2018-02-03'))).toBe(true);
-    expect(disabledDate(Dayjs('2018-02-04'))).toBe(false);
-    expect(disabledDate(Dayjs('2018-06-01'))).toBe(true);
+    expect(calendarProps().disabledDate?.(Dayjs('2018-02-01'))).toBe(true);
+    expect(calendarProps().disabledDate?.(Dayjs('2018-02-02'))).toBe(false);
+    expect(calendarProps().disabledDate?.(Dayjs('2018-02-03'))).toBe(true);
+    expect(calendarProps().disabledDate?.(Dayjs('2018-02-04'))).toBe(false);
+    expect(calendarProps().disabledDate?.(Dayjs('2018-06-01'))).toBe(true);
  });

  it('Calendar MonthSelect should display correct label', () => {
    const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2019-06-1')];
-    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2019-01-01')} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const wrapper = render(<Calendar validRange={validRange} defaultValue={Dayjs('2019-01-01')} />);
+    expect(wrapper.container.children[0]).toMatchSnapshot();
  });

  it('Calendar should change mode by prop', () => {
    const monthMode = 'month';
    const yearMode = 'year';
-    const wrapper = mount(<Calendar />);
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(monthMode);
-    wrapper.setProps({ mode: yearMode });
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(yearMode);
+    const wrapper = render(<Calendar />);
+    expect(calendarHeaderProps().mode).toEqual(monthMode);
+    wrapper.rerender(<Calendar mode={yearMode} />);
+    expect(calendarHeaderProps().mode).toEqual(yearMode);
  });

  it('Calendar should switch mode', () => {
    const monthMode = 'month';
    const yearMode = 'year';
    const onPanelChangeStub = jest.fn();
-    const wrapper = mount(<Calendar mode={yearMode} onPanelChange={onPanelChangeStub} />);
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(yearMode);
-    wrapper.setProps({ mode: monthMode });
-    expect(wrapper.find('CalendarHeader').props().mode).toEqual(monthMode);
+    const wrapper = render(<Calendar mode={yearMode} onPanelChange={onPanelChangeStub} />);
+    expect(calendarHeaderProps().mode).toEqual(yearMode);
+    wrapper.rerender(<Calendar mode={monthMode} onPanelChange={onPanelChangeStub} />);
+    expect(calendarHeaderProps().mode).toEqual(monthMode);
    expect(onPanelChangeStub).toHaveBeenCalledTimes(0);
  });

@ -172,8 +198,8 @@ describe('Calendar', () => {
    MockDate.set(Dayjs('2018-10-19').valueOf());
    // eslint-disable-next-line global-require
    const zhCN = require('../locale/zh_CN').default;
-    const wrapper = mount(<Calendar locale={zhCN} />);
-    expect(wrapper.render()).toMatchSnapshot();
+    const wrapper = render(<Calendar locale={zhCN} />);
+    expect(wrapper.container.children[0]).toMatchSnapshot();
    MockDate.reset();
  });

@ -181,9 +207,9 @@ describe('Calendar', () => {
    it('trigger when click last month of date', () => {
      const onPanelChange = jest.fn();
      const date = Dayjs('1990-09-03');
-      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
+      const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />);

-      wrapper.find('.ant-picker-cell').at(0).simulate('click');
+      fireEvent.click(Array.from(wrapper.container.querySelectorAll('.ant-picker-cell')).at(0)!);

      expect(onPanelChange).toHaveBeenCalled();
      expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
@ -192,9 +218,9 @@ describe('Calendar', () => {
    it('not trigger when in same month', () => {
      const onPanelChange = jest.fn();
      const date = Dayjs('1990-09-03');
-      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
+      const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />);

-      wrapper.find('.ant-picker-cell').at(10).simulate('click');
+      fireEvent.click(Array.from(wrapper.container.querySelectorAll('.ant-picker-cell')).at(10)!);

      expect(onPanelChange).not.toHaveBeenCalled();
    });
@ -203,15 +229,15 @@ describe('Calendar', () => {
  it('switch should work correctly without prop mode', async () => {
    const onPanelChange = jest.fn();
    const date = Dayjs(new Date(Date.UTC(2017, 7, 9, 8)));
-    const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
+    const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />);

-    expect(wrapper.find('CalendarHeader').props().mode).toBe('month');
-    expect(wrapper.find('.ant-picker-date-panel').length).toBe(1);
-    expect(wrapper.find('.ant-picker-month-panel').length).toBe(0);
+    expect(calendarHeaderProps().mode).toBe('month');
+    expect(wrapper.container.querySelectorAll('.ant-picker-date-panel').length).toBe(1);
+    expect(wrapper.container.querySelectorAll('.ant-picker-month-panel').length).toBe(0);
+    fireEvent.click(wrapper.container.querySelector('.ant-radio-button-input[value="year"]')!);
+    expect(wrapper.container.querySelectorAll('.ant-picker-date-panel').length).toBe(0);
+    expect(wrapper.container.querySelectorAll('.ant-picker-month-panel').length).toBe(1);

-    wrapper.find('.ant-radio-button-input[value="year"]').simulate('change');
-    expect(wrapper.find('.ant-picker-date-panel').length).toBe(0);
-    expect(wrapper.find('.ant-picker-month-panel').length).toBe(1);
    expect(onPanelChange).toHaveBeenCalled();
    expect(onPanelChange.mock.calls[0][1]).toEqual('year');
  });
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@ -20,8 +20,8 @@ import dayjs from 'dayjs';
 import React, { useState } from 'react';

 const App: React.FC = () => {
-  const [value, setValue] = useState(dayjs('2017-01-25'));
-  const [selectedValue, setSelectedValue] = useState(dayjs('2017-01-25'));
+  const [value, setValue] = useState(() => dayjs('2017-01-25'));
+  const [selectedValue, setSelectedValue] = useState(() => dayjs('2017-01-25'));

  const onSelect = (newValue: Dayjs) => {
    setValue(newValue);
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@ -179,7 +179,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
      };
      result.lang = {
        ...result.lang,
-        ...((locale || {}) as any).lang,
+        ...(locale || {}).lang,
      };
      return result;
    };
@ -237,7 +237,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {

    return wrapSSR(
      <LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
-        {(mergedLocale: any) => (
+        {contextLocale => (
          <div
            className={classNames(
              calendarPrefixCls,
@ -265,7 +265,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
                generateConfig={generateConfig}
                mode={mergedMode}
                fullscreen={fullscreen}
-                locale={mergedLocale.lang}
+                locale={contextLocale.lang}
                validRange={validRange}
                onChange={onInternalSelect}
                onModeChange={triggerModeChange}
@ -275,13 +275,13 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
            <RCPickerPanel
              value={mergedValue}
              prefixCls={prefixCls}
-              locale={mergedLocale.lang}
+              locale={contextLocale.lang}
              generateConfig={generateConfig}
              dateRender={dateRender}
-              monthCellRender={date => monthRender(date, mergedLocale.lang)}
+              monthCellRender={date => monthRender(date, contextLocale.lang)}
              onSelect={onInternalSelect}
              mode={panelMode}
-              picker={panelMode as any}
+              picker={panelMode}
              disabledDate={mergedDisabledDate}
              hideHeader
            />
--- 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"
@ -420,18 +420,11 @@ Array [
    />
    <span
      class="ant-switch-inner"
-    >
-      <span
-        class="ant-switch-inner-checked"
-      />
-      <span
-        class="ant-switch-inner-unchecked"
-      />
-    </span>
+    />
  </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"
@ -449,7 +442,7 @@ Array [
            <li />
            <li />
            <li
-              style="width: 61%;"
+              style="width:61%"
            />
          </ul>
        </div>
@ -458,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"
@ -478,7 +471,7 @@ Array [
        >
          <h3
            class="ant-skeleton-title"
-            style="width: 50%;"
+            style="width:50%"
          />
          <ul
            class="ant-skeleton-paragraph"
@ -493,7 +486,7 @@ Array [
      class="ant-card-actions"
    >
      <li
-        style="width: 33.333333333333336%;"
+        style="width:33.333333333333336%"
      >
        <span>
          <span
@ -518,7 +511,7 @@ Array [
        </span>
      </li>
      <li
-        style="width: 33.333333333333336%;"
+        style="width:33.333333333333336%"
      >
        <span>
          <span
@ -543,7 +536,7 @@ Array [
        </span>
      </li>
      <li
-        style="width: 33.333333333333336%;"
+        style="width:33.333333333333336%"
      >
        <span>
          <span
@ -575,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"
@ -622,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
@ -647,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
@ -672,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
@ -703,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"
@ -725,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"
@ -760,17 +753,15 @@ 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"
                >
@ -781,11 +772,9 @@ 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"
                >
@ -801,13 +790,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="rc-tabs-test-more-popup"
+              aria-controls="null-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="rc-tabs-test-more"
-              style="visibility: hidden; order: 1;"
+              id="null-more"
+              style="visibility:hidden;order:1"
              tabindex="-1"
              type="button"
            >
@ -833,20 +822,20 @@ Array [
            </button>
            <div>
              <div
-                class="ant-tabs-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-                style="opacity: 0;"
+                class="ant-tabs-dropdown"
+                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="rc-tabs-test-more-popup"
+                  id="null-more-popup"
                  role="listbox"
                  tabindex="-1"
                />
                <div
                  aria-hidden="true"
-                  style="display: none;"
+                  style="display:none"
                />
              </div>
            </div>
@ -860,9 +849,7 @@ 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"
            />
@ -882,7 +869,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"
@ -902,17 +889,15 @@ 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"
                >
@ -923,11 +908,9 @@ 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"
                >
@ -938,11 +921,9 @@ 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"
                >
@ -958,13 +939,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="rc-tabs-test-more-popup"
+              aria-controls="null-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="rc-tabs-test-more"
-              style="visibility: hidden; order: 1;"
+              id="null-more"
+              style="visibility:hidden;order:1"
              tabindex="-1"
              type="button"
            >
@ -990,20 +971,20 @@ Array [
            </button>
            <div>
              <div
-                class="ant-tabs-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-                style="opacity: 0;"
+                class="ant-tabs-dropdown"
+                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="rc-tabs-test-more-popup"
+                  id="null-more-popup"
                  role="listbox"
                  tabindex="-1"
                />
                <div
                  aria-hidden="true"
-                  style="display: none;"
+                  style="display:none"
                />
              </div>
            </div>
@ -1026,9 +1007,7 @@ 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"
@ -420,18 +420,11 @@ Array [
    />
    <span
      class="ant-switch-inner"
-    >
-      <span
-        class="ant-switch-inner-checked"
-      />
-      <span
-        class="ant-switch-inner-unchecked"
-      />
-    </span>
+    />
  </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"
@ -449,7 +442,7 @@ Array [
            <li />
            <li />
            <li
-              style="width: 61%;"
+              style="width:61%"
            />
          </ul>
        </div>
@ -458,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"
@ -478,7 +471,7 @@ Array [
        >
          <h3
            class="ant-skeleton-title"
-            style="width: 50%;"
+            style="width:50%"
          />
          <ul
            class="ant-skeleton-paragraph"
@ -493,7 +486,7 @@ Array [
      class="ant-card-actions"
    >
      <li
-        style="width: 33.333333333333336%;"
+        style="width:33.333333333333336%"
      >
        <span>
          <span
@ -518,7 +511,7 @@ Array [
        </span>
      </li>
      <li
-        style="width: 33.333333333333336%;"
+        style="width:33.333333333333336%"
      >
        <span>
          <span
@ -543,7 +536,7 @@ Array [
        </span>
      </li>
      <li
-        style="width: 33.333333333333336%;"
+        style="width:33.333333333333336%"
      >
        <span>
          <span
@ -575,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"
@ -622,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
@ -647,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
@ -672,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
@ -703,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"
@ -725,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"
@ -760,17 +753,15 @@ 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"
                >
@ -781,11 +772,9 @@ 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"
                >
@ -801,13 +790,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="rc-tabs-test-more-popup"
+              aria-controls="null-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="rc-tabs-test-more"
-              style="visibility: hidden; order: 1;"
+              id="null-more"
+              style="visibility:hidden;order:1"
              tabindex="-1"
              type="button"
            >
@ -841,9 +830,7 @@ 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"
            />
@ -863,7 +850,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"
@ -883,17 +870,15 @@ 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"
                >
@ -904,11 +889,9 @@ 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"
                >
@ -919,11 +902,9 @@ 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"
                >
@ -939,13 +920,13 @@ Array [
            class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
          >
            <button
-              aria-controls="rc-tabs-test-more-popup"
+              aria-controls="null-more-popup"
              aria-expanded="false"
              aria-haspopup="listbox"
              aria-hidden="true"
              class="ant-tabs-nav-more"
-              id="rc-tabs-test-more"
-              style="visibility: hidden; order: 1;"
+              id="null-more"
+              style="visibility:hidden;order:1"
              tabindex="-1"
              type="button"
            >
@ -988,9 +969,7 @@ 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/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="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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="opacity: 1;"
+        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:0;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-11px;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-22px;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-33px;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+          style="width:900%;left:-100%"
        >
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="-1"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  4
                </h3>
@ -724,16 +724,16 @@ Array [
            aria-hidden="false"
            class="slick-slide slick-active slick-current"
            data-index="0"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  1
                </h3>
@ -744,16 +744,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="1"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  2
                </h3>
@ -764,16 +764,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="2"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  3
                </h3>
@ -784,16 +784,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="3"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  4
                </h3>
@ -804,16 +804,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="4"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  1
                </h3>
@ -824,16 +824,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="5"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  2
                </h3>
@ -844,16 +844,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="6"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  3
                </h3>
@ -864,16 +864,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="7"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  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="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="true"
          class="slick-slide slick-cloned"
          data-index="-1"
-          style="width: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="outline:none;width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px;"
+          style="width:11.11111111111111%"
          tabindex="-1"
        >
          <div>
            <div
-              style="width: 100%; display: inline-block;"
+              style="width:100%;display:inline-block"
              tabindex="-1"
            >
              <h3
-                style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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="opacity: 1;"
+        style="width:900%;left:-100%"
      >
        <div
          aria-hidden="false"
          class="slick-slide slick-active slick-current"
          data-index="0"
-          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:0;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-11px;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-22px;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-33px;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: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
              >
                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="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+          style="width:900%;left:-100%"
        >
          <div
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="-1"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  4
                </h3>
@ -724,16 +724,16 @@ Array [
            aria-hidden="false"
            class="slick-slide slick-active slick-current"
            data-index="0"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  1
                </h3>
@ -744,16 +744,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="1"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  2
                </h3>
@ -764,16 +764,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="2"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  3
                </h3>
@ -784,16 +784,16 @@ Array [
            aria-hidden="true"
            class="slick-slide"
            data-index="3"
-            style="outline: none; width: 0px;"
+            style="outline:none;width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  4
                </h3>
@ -804,16 +804,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="4"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  1
                </h3>
@ -824,16 +824,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="5"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  2
                </h3>
@ -844,16 +844,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="6"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  3
                </h3>
@ -864,16 +864,16 @@ Array [
            aria-hidden="true"
            class="slick-slide slick-cloned"
            data-index="7"
-            style="width: 0px;"
+            style="width:11.11111111111111%"
            tabindex="-1"
          >
            <div>
              <div
-                style="width: 100%; display: inline-block;"
+                style="width:100%;display:inline-block"
                tabindex="-1"
              >
                <h3
-                  style="height: 160px; color: rgb(255, 255, 255); line-height: 160px; text-align: center; background: rgb(54, 77, 121);"
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
                >
                  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/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
--- a/components/cascader/tests/snapshots/demo.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo.test.ts.snap
@ -12,15 +12,14 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -35,7 +34,7 @@ exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -73,15 +72,14 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -94,7 +92,7 @@ exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] =
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -132,15 +130,14 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -155,7 +152,7 @@ exports[`renders ./components/cascader/demo/custom-dropdown.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -184,7 +181,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"
@ -194,15 +191,14 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -213,14 +209,17 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
    >
      <span>
        Zhejiang
-         / 
+        <!-- -->
+         /
      </span>
      <span>
        Hangzhou
-         / 
+        <!-- -->
+         /
      </span>
      <span>
        West Lake
+        <!-- -->
         (
        <a>
          752100
@ -232,7 +231,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -258,7 +257,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-clear"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -287,6 +286,7 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
 exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
 <span>
  Unselect
+  <!-- -->
  <a
    href="#"
  >
@ -307,15 +307,14 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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,7 +330,7 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -357,7 +356,7 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-clear"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -395,15 +394,14 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -416,7 +414,7 @@ exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -454,15 +452,14 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -477,7 +474,7 @@ exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -515,15 +512,14 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -536,7 +532,7 @@ exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -574,15 +570,14 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_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=""
@ -595,7 +590,7 @@ exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -624,7 +619,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"
@ -634,23 +629,22 @@ 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: 0px;"
+          style="width:0"
        >
          <input
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -766,15 +760,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -789,7 +782,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -818,11 +811,11 @@ Array [

 exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
 <div
-  style="padding-bottom: 0px; position: relative; min-width: 0;"
+  style="padding-bottom:0;position:relative;width:fit-content;min-width:0"
 >
  <div
-    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
-    style="margin: 0px;"
+    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+    style="margin:0"
  >
    <div
      class="ant-select-selector"
@ -832,16 +825,15 @@ exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
-          aria-expanded="true"
+          aria-controls="undefined_list"
+          aria-expanded="false"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -853,100 +845,10 @@ exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
        Please select
      </span>
    </div>
-    <div>
-      <div
-        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
-            class="ant-cascader-menus"
-          >
-            <ul
-              class="ant-cascader-menu"
-              role="menu"
-            >
-              <li
-                aria-checked="false"
-                class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                data-path-key="zhejiang"
-                role="menuitemcheckbox"
-                title="Zhejiang"
-              >
-                <div
-                  class="ant-cascader-menu-item-content"
-                >
-                  Zhejiang
-                </div>
-                <div
-                  class="ant-cascader-menu-item-expand-icon"
-                >
-                  <span
-                    aria-label="right"
-                    class="anticon anticon-right"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="right"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </li>
-              <li
-                aria-checked="false"
-                class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                data-path-key="jiangsu"
-                role="menuitemcheckbox"
-                title="Jiangsu"
-              >
-                <div
-                  class="ant-cascader-menu-item-content"
-                >
-                  Jiangsu
-                </div>
-                <div
-                  class="ant-cascader-menu-item-expand-icon"
-                >
-                  <span
-                    aria-label="right"
-                    class="anticon anticon-right"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="right"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -970,9 +872,6 @@ exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
      </span>
    </span>
  </div>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
-  />
 </div>
 `;

@ -988,12 +887,11 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
    >
      <input
        aria-autocomplete="list"
-        aria-controls="rc_select_test_list"
+        aria-controls="undefined_list"
        aria-haspopup="listbox"
-        aria-owns="rc_select_test_list"
+        aria-owns="undefined_list"
        autocomplete="off"
        class="ant-select-selection-search-input"
-        id="rc_select_test"
        role="combobox"
        type="search"
        value=""
@ -1008,7 +906,7 @@ exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
  <span
    aria-hidden="true"
    class="ant-select-arrow"
-    style="user-select: none;"
+    style="user-select:none;-webkit-user-select:none"
    unselectable="on"
  >
    <span
@ -1038,7 +936,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"
@ -1049,7 +947,7 @@ Array [
        <div
          aria-hidden="true"
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
-          style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
+          style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
        >
          <span
            class="ant-select-selection-item"
@ -1064,23 +962,22 @@ 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: 0px;"
+            style="width:0"
          >
            <input
              aria-autocomplete="list"
-              aria-controls="rc_select_test_list"
+              aria-controls="undefined_list"
              aria-haspopup="listbox"
-              aria-owns="rc_select_test_list"
+              aria-owns="undefined_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=""
@ -1097,7 +994,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-clear"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1125,7 +1022,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"
@ -1136,7 +1033,7 @@ Array [
        <div
          aria-hidden="true"
          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-rest"
-          style="opacity: 0; height: 0px; overflow-y: hidden; order: 9007199254740991; pointer-events: none; position: absolute;"
+          style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
        >
          <span
            class="ant-select-selection-item"
@ -1151,23 +1048,22 @@ 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: 0px;"
+            style="width:0"
          >
            <input
              aria-autocomplete="list"
-              aria-controls="rc_select_test_list"
+              aria-controls="undefined_list"
              aria-haspopup="listbox"
-              aria-owns="rc_select_test_list"
+              aria-owns="undefined_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 +1080,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-clear"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1224,15 +1120,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -1245,7 +1140,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1282,15 +1177,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -1303,7 +1197,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1340,15 +1234,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -1361,7 +1254,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1396,7 +1289,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"
@ -1409,15 +1302,14 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
        >
          <input
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -1432,7 +1324,7 @@ exports[`renders ./components/cascader/demo/status.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -1471,23 +1363,22 @@ 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: 0px;"
+              style="width:0"
            >
              <input
                aria-autocomplete="list"
-                aria-controls="rc_select_test_list"
+                aria-controls="undefined_list"
                aria-haspopup="listbox"
-                aria-owns="rc_select_test_list"
+                aria-owns="undefined_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=""
@ -1524,15 +1415,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -1547,7 +1437,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1584,15 +1474,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -1607,7 +1496,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      ab
@ -1626,15 +1515,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -1649,7 +1537,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1686,15 +1574,14 @@ Array [
      >
        <input
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -1709,7 +1596,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
--- a/components/cascader/tests/index.test.tsx
+++ b/components/cascader/tests/index.test.tsx
@ -252,7 +252,7 @@ describe('Cascader', () => {
  });

  it('can use fieldNames', () => {
-    const customerOptions = [
+    const customOptions = [
      {
        code: 'zhejiang',
        name: 'Zhejiang',
@ -291,7 +291,7 @@ describe('Cascader', () => {

    const { container } = render(
      <Cascader
-        options={customerOptions}
+        options={customOptions}
        onChange={onChange}
        fieldNames={{
          children: 'items',
@ -312,8 +312,7 @@ describe('Cascader', () => {
  });

  it('should show not found content when options.length is 0', () => {
-    const customerOptions: any[] = [];
-    const { container } = render(<Cascader options={customerOptions} />);
+    const { container } = render(<Cascader options={[]} />);
    toggleOpen(container);
    expect(getDropdown(container)).toMatchSnapshot();
  });
@ -399,7 +398,7 @@ describe('Cascader', () => {
  });

  it('placement work correctly', async () => {
-    const customerOptions = [
+    const customOptions = [
      {
        value: 'zhejiang',
        label: 'Zhejiang',
@ -411,7 +410,7 @@ describe('Cascader', () => {
        ],
      },
    ];
-    const { container } = render(<Cascader options={customerOptions} placement="topRight" />);
+    const { container } = render(<Cascader options={customOptions} placement="topRight" />);
    toggleOpen(container);

    // Inject in tests/__mocks__/rc-trigger.js
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -232,7 +232,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas

  // ===================== Disabled =====================
  const disabled = React.useContext(DisabledContext);
-  const mergedDisabled = customDisabled || disabled;
+  const mergedDisabled = customDisabled ?? disabled;

  // ===================== Icon ======================
  let mergedExpandIcon = expandIcon;
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@ -67,7 +67,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
  const checkboxGroup = React.useContext(GroupContext);
  const { isFormItemInput } = useContext(FormItemInputContext);
  const contextDisabled = useContext(DisabledContext);
-  const mergedDisabled = disabled || checkboxGroup?.disabled || contextDisabled;
+  const mergedDisabled = (checkboxGroup?.disabled || disabled) ?? contextDisabled;

  const prevValue = React.useRef(restProps.value);

--- a/components/checkbox/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/checkbox/tests/snapshots/demo-extend.test.ts.snap
@ -10,7 +10,6 @@ exports[`renders ./components/checkbox/demo/basic.md extend context correctly 1`
    <input
      class="ant-checkbox-input"
      type="checkbox"
-      value=""
    />
    <span
      class="ant-checkbox-inner"
@ -34,7 +33,6 @@ Array [
        aria-checked="mixed"
        class="ant-checkbox-input"
        type="checkbox"
-        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -117,7 +115,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"
@ -129,7 +127,6 @@ Array [
          checked=""
          class="ant-checkbox-input"
          type="checkbox"
-          value=""
        />
        <span
          class="ant-checkbox-inner"
@ -151,7 +148,7 @@ Array [
    </button>
    <button
      class="ant-btn ant-btn-primary ant-btn-sm"
-      style="margin: 0px 10px;"
+      style="margin:0 10px"
      type="button"
    >
      <span>
@ -166,11 +163,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"
@ -191,7 +188,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
@ -223,11 +220,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"
@ -248,7 +245,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
@ -279,7 +276,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"
@ -321,7 +318,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"
@ -377,7 +374,6 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
-        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -396,7 +392,6 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
-        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -607,7 +602,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,7 +10,6 @@ exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
    <input
      class="ant-checkbox-input"
      type="checkbox"
-      value=""
    />
    <span
      class="ant-checkbox-inner"
@ -34,7 +33,6 @@ Array [
        aria-checked="mixed"
        class="ant-checkbox-input"
        type="checkbox"
-        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -117,7 +115,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"
@ -129,7 +127,6 @@ Array [
          checked=""
          class="ant-checkbox-input"
          type="checkbox"
-          value=""
        />
        <span
          class="ant-checkbox-inner"
@ -151,7 +148,7 @@ Array [
    </button>
    <button
      class="ant-btn ant-btn-primary ant-btn-sm"
-      style="margin: 0px 10px;"
+      style="margin:0 10px"
      type="button"
    >
      <span>
@ -166,11 +163,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"
@ -191,7 +188,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
@ -223,11 +220,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"
@ -248,7 +245,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
@ -279,7 +276,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"
@ -321,7 +318,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"
@ -377,7 +374,6 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
-        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -396,7 +392,6 @@ Array [
        class="ant-checkbox-input"
        disabled=""
        type="checkbox"
-        value=""
      />
      <span
        class="ant-checkbox-inner"
@ -607,7 +602,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/checkbox/index.tsx
+++ b/components/checkbox/index.tsx
@ -9,6 +9,7 @@ export { CheckboxGroupProps, CheckboxOptionType } from './Group';
 interface CompoundedComponent
  extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
  Group: typeof Group;
+  /** @internal */
  __ANT_CHECKBOX: boolean;
 }

--- a/components/collapse/CollapsePanel.tsx
+++ b/components/collapse/CollapsePanel.tsx
@ -4,7 +4,7 @@ import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import warning from '../_util/warning';

-export type CollapsibleType = 'header' | 'disabled';
+export type CollapsibleType = 'header' | 'icon' | 'disabled';

 export interface CollapsePanelProps {
  key: string | number;
--- 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="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -297,7 +297,7 @@ exports[`renders ./components/collapse/demo/borderless.md extend context correct
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -320,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>
@ -416,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"
@ -443,7 +443,7 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
                fill="currentColor"
                focusable="false"
                height="1em"
-                style="transform: rotate(90deg);"
+                style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
                viewBox="64 64 896 896"
                width="1em"
              >
@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md extend context correc
      </div>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-collapse ant-collapse-icon-position-start"
+    >
+      <div
+        class="ant-collapse-item ant-collapse-item-active"
+      >
+        <div
+          aria-disabled="false"
+          aria-expanded="true"
+          class="ant-collapse-header ant-collapse-icon-collapsible-only"
+        >
+          <div
+            class="ant-collapse-expand-icon"
+          >
+            <span
+              aria-label="right"
+              class="anticon anticon-right ant-collapse-arrow"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="right"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                />
+              </svg>
+            </span>
+          </div>
+          <span
+            class="ant-collapse-header-text"
+          >
+            This panel can only be collapsed by clicking icon
+          </span>
+        </div>
+        <div
+          class="ant-collapse-content ant-collapse-content-active"
+        >
+          <div
+            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>
+      </div>
+    </div>
+  </div>
  <div
    class="ant-space-item"
  >
@ -554,7 +615,7 @@ exports[`renders ./components/collapse/demo/custom.md extend context correctly 1
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="0 0 1024 1024"
            width="1em"
          >
@ -696,7 +757,7 @@ Array [
              fill="currentColor"
              focusable="false"
              height="1em"
-              style="transform: rotate(90deg);"
+              style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
              viewBox="64 64 896 896"
              width="1em"
            >
@ -881,11 +942,11 @@ Array [
  </div>,
  <br />,
  <span>
-    Expand Icon Position: 
+    Expand Icon Position:
  </span>,
  <div
    class="ant-select ant-select-single ant-select-show-arrow"
-    style="margin: 0px 8px;"
+    style="margin:0 8px"
  >
    <div
      class="ant-select-selector"
@ -894,17 +955,16 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="rc_select_test_list_test"
+          aria-activedescendant="undefined_list_0"
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -919,19 +979,19 @@ Array [
    </div>
    <div>
      <div
-        class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-        style="opacity: 0;"
+        class="ant-select-dropdown"
+        style="opacity:0"
      >
        <div>
          <div
-            id="rc_select_test_list"
+            id="undefined_list"
            role="listbox"
-            style="height: 0px; width: 0px; overflow: hidden;"
+            style="height:0;width:0;overflow:hidden"
          >
            <div
              aria-label="start"
              aria-selected="true"
-              id="rc_select_test_list_test"
+              id="undefined_list_0"
              role="option"
            >
              start
@ -939,7 +999,7 @@ Array [
            <div
              aria-label="end"
              aria-selected="false"
-              id="rc_select_test_list_test"
+              id="undefined_list_1"
              role="option"
            >
              end
@ -947,16 +1007,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;"
+              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
            >
              <div>
                <div
                  class="rc-virtual-list-holder-inner"
-                  style="display: flex; flex-direction: column;"
+                  style="display:flex;flex-direction:column"
                >
                  <div
                    aria-selected="true"
@ -971,7 +1031,7 @@ Array [
                    <span
                      aria-hidden="true"
                      class="ant-select-item-option-state"
-                      style="user-select: none;"
+                      style="user-select:none;-webkit-user-select:none"
                      unselectable="on"
                    />
                  </div>
@ -988,7 +1048,7 @@ Array [
                    <span
                      aria-hidden="true"
                      class="ant-select-item-option-state"
-                      style="user-select: none;"
+                      style="user-select:none;-webkit-user-select:none"
                      unselectable="on"
                    />
                  </div>
@ -1002,7 +1062,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -1057,7 +1117,7 @@ exports[`renders ./components/collapse/demo/ghost.md extend context correctly 1`
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -1325,7 +1385,7 @@ exports[`renders ./components/collapse/demo/noarrow.md extend context correctly
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
--- 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="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -297,7 +297,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -320,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>
@ -416,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"
@ -443,7 +443,7 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
                fill="currentColor"
                focusable="false"
                height="1em"
-                style="transform: rotate(90deg);"
+                style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
                viewBox="64 64 896 896"
                width="1em"
              >
@ -475,6 +475,67 @@ exports[`renders ./components/collapse/demo/collapsible.md correctly 1`] = `
      </div>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-collapse ant-collapse-icon-position-start"
+    >
+      <div
+        class="ant-collapse-item ant-collapse-item-active"
+      >
+        <div
+          aria-disabled="false"
+          aria-expanded="true"
+          class="ant-collapse-header ant-collapse-icon-collapsible-only"
+        >
+          <div
+            class="ant-collapse-expand-icon"
+          >
+            <span
+              aria-label="right"
+              class="anticon anticon-right ant-collapse-arrow"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="right"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                />
+              </svg>
+            </span>
+          </div>
+          <span
+            class="ant-collapse-header-text"
+          >
+            This panel can only be collapsed by clicking icon
+          </span>
+        </div>
+        <div
+          class="ant-collapse-content ant-collapse-content-active"
+        >
+          <div
+            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>
+      </div>
+    </div>
+  </div>
  <div
    class="ant-space-item"
  >
@ -554,7 +615,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="0 0 1024 1024"
            width="1em"
          >
@ -696,7 +757,7 @@ Array [
              fill="currentColor"
              focusable="false"
              height="1em"
-              style="transform: rotate(90deg);"
+              style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
              viewBox="64 64 896 896"
              width="1em"
            >
@ -881,11 +942,11 @@ Array [
  </div>,
  <br />,
  <span>
-    Expand Icon Position: 
+    Expand Icon Position:
  </span>,
  <div
    class="ant-select ant-select-single ant-select-show-arrow"
-    style="margin: 0px 8px;"
+    style="margin:0 8px"
  >
    <div
      class="ant-select-selector"
@ -894,17 +955,16 @@ Array [
        class="ant-select-selection-search"
      >
        <input
-          aria-activedescendant="rc_select_test_list_test"
+          aria-activedescendant="undefined_list_0"
          aria-autocomplete="list"
-          aria-controls="rc_select_test_list"
+          aria-controls="undefined_list"
          aria-haspopup="listbox"
-          aria-owns="rc_select_test_list"
+          aria-owns="undefined_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=""
@ -920,7 +980,7 @@ Array [
    <span
      aria-hidden="true"
      class="ant-select-arrow"
-      style="user-select: none;"
+      style="user-select:none;-webkit-user-select:none"
      unselectable="on"
    >
      <span
@ -975,7 +1035,7 @@ exports[`renders ./components/collapse/demo/ghost.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
@ -1243,7 +1303,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
            fill="currentColor"
            focusable="false"
            height="1em"
-            style="transform: rotate(90deg);"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
--- a/components/collapse/demo/collapsible.md
+++ b/components/collapse/demo/collapsible.md
@ -32,6 +32,11 @@ const App: React.FC = () => (
        <p>{text}</p>
      </Panel>
    </Collapse>
+    <Collapse collapsible="icon" defaultActiveKey={['1']}>
+      <Panel header="This panel can only be collapsed by clicking icon" key="1">
+        <p>{text}</p>
+      </Panel>
+    </Collapse>
    <Collapse collapsible="disabled">
      <Panel header="This panel can't be collapsed" key="1">
        <p>{text}</p>
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -22,7 +22,7 @@ A content area which can be collapsed and expanded.
 | accordion | If true, Collapse renders as Accordion | boolean | false |  |
 | activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel |  |
 | bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
-| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 |
+| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
 | destroyInactivePanel | Destroy Inactive Panel | boolean | false |  |
 | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - |  |
@ -34,9 +34,9 @@ A content area which can be collapsed and expanded.

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 4.9.0 |
+| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
 | extra | The extra element in the corner | ReactNode | - |  |
 | forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false |  |
 | header | Title of the panel | ReactNode | - |  |
 | key | Unique key identifying the panel from among its siblings | string \| number | - |  |
-| showArrow | If false, panel will not show arrow icon | boolean | true |  |
+| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true |  |
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
 | accordion | 手风琴模式 | boolean | false |  |
 | activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 |  |
 | bordered | 带边框风格的折叠面板 | boolean | true |  |
-| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 4.9.0 |
+| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
 | defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - |  |
 | destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false |  |
 | expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |  |
@ -33,11 +33,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg

 ### Collapse.Panel

-| 参数        | 说明                           | 类型                   | 默认值 | 版本  |
-| ----------- | ------------------------------ | ---------------------- | ------ | ----- |
-| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | -      | 4.9.0 |
-| extra       | 自定义渲染每个面板右上角的内容 | ReactNode              | -      |       |
-| forceRender | 被隐藏时是否渲染 DOM 结构      | boolean                | false  |       |
-| header      | 面板头内容                     | ReactNode              | -      |       |
-| key         | 对应 activeKey                 | string \| number       | -      |       |
-| showArrow   | 是否展示当前面板上的箭头       | boolean                | true   |       |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
+| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |  |
+| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
+| header | 面板头内容 | ReactNode | - |  |
+| key | 对应 activeKey | string \| number | - |  |
+| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true |  |
--- a/components/collapse/style/index.tsx
+++ b/components/collapse/style/index.tsx
@ -109,6 +109,14 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
          },
        },

+        [`${componentCls}-icon-collapsible-only`]: {
+          cursor: 'default',
+
+          [`${componentCls}-expand-icon`]: {
+            cursor: 'pointer',
+          },
+        },
+
        [`&${componentCls}-no-arrow`]: {
          [`> ${componentCls}-header`]: {
            paddingInlineStart: paddingSM,
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -16000,7 +16000,6 @@ exports[`ConfigProvider components Input configProvider 1`] = `
    class="config-input-affix-wrapper config-input-password"
  >
    <input
-      action="click"
      class="config-input"
      type="password"
      value=""
@ -16098,7 +16097,6 @@ exports[`ConfigProvider components Input configProvider componentDisabled 1`] =
    class="config-input-affix-wrapper config-input-affix-wrapper-disabled config-input-password"
  >
    <input
-      action="click"
      class="config-input config-input-disabled"
      disabled=""
      type="password"
@ -16195,7 +16193,6 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
    class="config-input-affix-wrapper config-input-password config-input-affix-wrapper-lg"
  >
    <input
-      action="click"
      class="config-input config-input-lg"
      type="password"
      value=""
@ -16290,7 +16287,6 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
    class="config-input-affix-wrapper config-input-password"
  >
    <input
-      action="click"
      class="config-input"
      type="password"
      value=""
@ -16385,7 +16381,6 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc
    class="ant-input-affix-wrapper ant-input-password"
  >
    <input
-      action="click"
      class="ant-input"
      type="password"
      value=""
@ -16480,7 +16475,6 @@ exports[`ConfigProvider components Input normal 1`] = `
    class="ant-input-affix-wrapper ant-input-password"
  >
    <input
-      action="click"
      class="ant-input"
      type="password"
      value=""
@ -16575,7 +16569,6 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
    class="ant-input-affix-wrapper prefix-Input"
  >
    <input
-      action="click"
      class="ant-input"
      type="password"
      value=""
@ -20994,23 +20987,27 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
              class="config-popconfirm-message"
            >
              <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="config-popconfirm-message-icon"
              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
              </span>
              <div
                class="config-popconfirm-message-title"
@ -21077,23 +21074,27 @@ exports[`ConfigProvider components Popconfirm configProvider componentDisabled 1
              class="config-popconfirm-message"
            >
              <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="config-popconfirm-message-icon"
              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
              </span>
              <div
                class="config-popconfirm-message-title"
@ -21162,23 +21163,27 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
              class="config-popconfirm-message"
            >
              <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="config-popconfirm-message-icon"
              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
              </span>
              <div
                class="config-popconfirm-message-title"
@ -21245,23 +21250,27 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
              class="config-popconfirm-message"
            >
              <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="config-popconfirm-message-icon"
              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
              </span>
              <div
                class="config-popconfirm-message-title"
@ -21328,23 +21337,27 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
              class="ant-popconfirm-message"
            >
              <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="ant-popconfirm-message-icon"
              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
              </span>
              <div
                class="ant-popconfirm-message-title"
@ -21411,23 +21424,27 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
              class="ant-popconfirm-message"
            >
              <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="ant-popconfirm-message-icon"
              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
              </span>
              <div
                class="ant-popconfirm-message-title"
@ -21494,23 +21511,27 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
              class="prefix-Popconfirm-message"
            >
              <span
-                aria-label="exclamation-circle"
-                class="anticon anticon-exclamation-circle"
-                role="img"
+                class="prefix-Popconfirm-message-icon"
              >
-                <svg
-                  aria-hidden="true"
-                  data-icon="exclamation-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
+                <span
+                  aria-label="exclamation-circle"
+                  class="anticon anticon-exclamation-circle"
+                  role="img"
                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    data-icon="exclamation-circle"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+                    />
+                  </svg>
+                </span>
              </span>
              <div
                class="prefix-Popconfirm-message-title"
@ -26412,14 +26433,7 @@ exports[`ConfigProvider components Switch configProvider 1`] = `
  />
  <span
    class="config-switch-inner"
-  >
-    <span
-      class="config-switch-inner-checked"
-    />
-    <span
-      class="config-switch-inner-unchecked"
-    />
-  </span>
+  />
 </button>
 `;

@ -26436,14 +26450,7 @@ exports[`ConfigProvider components Switch configProvider componentDisabled 1`] =
  />
  <span
    class="config-switch-inner"
-  >
-    <span
-      class="config-switch-inner-checked"
-    />
-    <span
-      class="config-switch-inner-unchecked"
-    />
-  </span>
+  />
 </button>
 `;

@ -26459,14 +26466,7 @@ exports[`ConfigProvider components Switch configProvider componentSize large 1`]
  />
  <span
    class="config-switch-inner"
-  >
-    <span
-      class="config-switch-inner-checked"
-    />
-    <span
-      class="config-switch-inner-unchecked"
-    />
-  </span>
+  />
 </button>
 `;

@ -26482,14 +26482,7 @@ exports[`ConfigProvider components Switch configProvider componentSize middle 1`
  />
  <span
    class="config-switch-inner"
-  >
-    <span
-      class="config-switch-inner-checked"
-    />
-    <span
-      class="config-switch-inner-unchecked"
-    />
-  </span>
+  />
 </button>
 `;

@ -26505,14 +26498,7 @@ exports[`ConfigProvider components Switch configProvider virtual and dropdownMat
  />
  <span
    class="ant-switch-inner"
-  >
-    <span
-      class="ant-switch-inner-checked"
-    />
-    <span
-      class="ant-switch-inner-unchecked"
-    />
-  </span>
+  />
 </button>
 `;

@ -26528,14 +26514,7 @@ exports[`ConfigProvider components Switch normal 1`] = `
  />
  <span
    class="ant-switch-inner"
-  >
-    <span
-      class="ant-switch-inner-checked"
-    />
-    <span
-      class="ant-switch-inner-unchecked"
-    />
-  </span>
+  />
 </button>
 `;

@ -26551,14 +26530,7 @@ exports[`ConfigProvider components Switch prefixCls 1`] = `
  />
  <span
    class="prefix-Switch-inner"
-  >
-    <span
-      class="prefix-Switch-inner-checked"
-    />
-    <span
-      class="prefix-Switch-inner-unchecked"
-    />
-  </span>
+  />
 </button>
 `;

--- a/components/config-provider/tests/components.test.tsx
+++ b/components/config-provider/tests/components.test.tsx
@ -476,9 +476,15 @@ describe('ConfigProvider', () => {
        myProps.iconPrefix = 'prefixIcon';
      }
      return (
-        <Steps {...props}>
-          <Steps.Step title="Bamboo" description="Little Light" />
-        </Steps>
+        <Steps
+          {...props}
+          items={[
+            {
+              title: 'Bamboo',
+              description: 'Little Light',
+            },
+          ]}
+        />
      );
    });

--- a/components/config-provider/tests/cssinjs.test.tsx
+++ b/components/config-provider/tests/cssinjs.test.tsx
@ -1,8 +1,8 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
 import ConfigProvider from '..';
 import Button from '../../button';
 import Divider from '../../divider';
+import { render } from '../../../tests/utils';

 describe('ConfigProvider.DynamicTheme', () => {
  beforeEach(() => {
@ -12,7 +12,7 @@ describe('ConfigProvider.DynamicTheme', () => {
  });

  it('customize primary color', () => {
-    mount(
+    render(
      <ConfigProvider
        theme={{
          token: {
@ -38,7 +38,7 @@ describe('ConfigProvider.DynamicTheme', () => {

  it('not crash on null token', () => {
    expect(() => {
-      mount(
+      render(
        <ConfigProvider
          theme={{
            token: null as any,
@ -49,7 +49,7 @@ describe('ConfigProvider.DynamicTheme', () => {
  });

  it('should support overriding aliasToken', () => {
-    mount(
+    render(
      <ConfigProvider
        theme={{
          token: {
--- a/components/config-provider/tests/locale.test.tsx
+++ b/components/config-provider/tests/locale.test.tsx
@ -12,8 +12,8 @@ import TimePicker from '../../time-picker';
 import { act, render, fireEvent } from '../../../tests/utils';

 describe('ConfigProvider.Locale', () => {
-  function $$(className: string): NodeListOf<Element> {
-    return document.body.querySelectorAll(className);
+  function $$(selector: string): NodeListOf<Element> {
+    return document.body.querySelectorAll(selector);
  }

  it('not throw', () => {
--- a/components/config-provider/tests/target.test.tsx
+++ b/components/config-provider/tests/target.test.tsx
@ -7,7 +7,7 @@ import { act, render } from '../../../tests/utils';
 describe('ConfigProvider.getTargetContainer', () => {
  it('Affix', () => {
    jest.useFakeTimers();
-    const getTargetContainer = jest.fn(() => window as unknown as HTMLElement);
+    const getTargetContainer = jest.fn(() => window);
    render(
      <ConfigProvider getTargetContainer={getTargetContainer}>
        <Affix>
@ -26,7 +26,7 @@ describe('ConfigProvider.getTargetContainer', () => {

  it('Anchor', () => {
    jest.useFakeTimers();
-    const getTargetContainer = jest.fn(() => window as unknown as HTMLElement);
+    const getTargetContainer = jest.fn(() => window);
    render(
      <ConfigProvider getTargetContainer={getTargetContainer}>
        <Anchor>
--- a/components/config-provider/context.tsx
+++ b/components/config-provider/context.tsx
@ -80,12 +80,6 @@ export const ConfigContext = React.createContext<ConfigConsumerProps>({
 export const ConfigConsumer = ConfigContext.Consumer;

 // =========================== withConfigConsumer ===========================
-// We need define many types here. So let's put in the block region
-type IReactComponent<P = any> =
-  | React.FC<P>
-  | React.ComponentClass<P>
-  | React.ClassicComponentClass<P>;
-
 interface BasicExportProps {
  prefixCls?: string;
 }
@ -101,7 +95,7 @@ interface ConstructorProps {
 /** @deprecated Use hooks instead. This is a legacy function */
 export function withConfigConsumer<ExportProps extends BasicExportProps>(config: ConsumerConfig) {
  return function withConfigConsumerFunc<ComponentDef>(
-    Component: IReactComponent,
+    Component: React.ComponentType<ExportProps>,
  ): React.FC<ExportProps> & ComponentDef {
    // Wrap with ConfigConsumer. Since we need compatible with react 15, be care when using ref methods
    const SFC = ((props: ExportProps) => (
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@ -52,7 +52,6 @@ const ButtonGroup = Button.Group;
 const { Option } = Select;
 const { TreeNode } = Tree;
 const { Search } = Input;
-const { Step } = Steps;

 const cascaderOptions = [
  {
@ -391,17 +390,43 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
            <Col span={24}>
              <Divider orientation="left">Steps example</Divider>
              <div>
-                <Steps progressDot current={currentStep}>
-                  <Step title="Finished" description="This is a description." />
-                  <Step title="In Progress" description="This is a description." />
-                  <Step title="Waiting" description="This is a description." />
-                </Steps>
+                <Steps
+                  progressDot
+                  current={currentStep}
+                  items={[
+                    {
+                      title: 'Finished',
+                      description: 'This is a description.',
+                    },
+                    {
+                      title: 'In Progress',
+                      description: 'This is a description.',
+                    },
+                    {
+                      title: 'Waiting',
+                      description: 'This is a description.',
+                    },
+                  ]}
+                />
                <br />
-                <Steps current={currentStep} onChange={onStepsChange}>
-                  <Step title="Step 1" description="This is a description." />
-                  <Step title="Step 2" description="This is a description." />
-                  <Step title="Step 3" description="This is a description." />
-                </Steps>
+                <Steps
+                  current={currentStep}
+                  onChange={onStepsChange}
+                  items={[
+                    {
+                      title: 'Step 1',
+                      description: 'This is a description.',
+                    },
+                    {
+                      title: 'Step 2',
+                      description: 'This is a description.',
+                    },
+                    {
+                      title: 'Step 3',
+                      description: 'This is a description.',
+                    },
+                  ]}
+                />
              </div>
            </Col>
          </Row>
--- a/components/config-provider/demo/theme.md
+++ b/components/config-provider/demo/theme.md
@ -369,23 +369,50 @@ const App: React.FC = () => {
          <Pagination showQuickJumper defaultCurrent={2} total={500} />

          {/* Steps */}
-          <Steps current={1} percent={60}>
-            <Steps.Step title="Finished" description="This is a description." />
-            <Steps.Step
-              title="In Progress"
-              subTitle="Left 00:00:08"
-              description="This is a description."
-            />
-            <Steps.Step title="Waiting" description="This is a description." />
-          </Steps>
+          <Steps
+            current={1}
+            percent={60}
+            items={[
+              {
+                title: 'Finished',
+                description: 'This is a description.',
+              },
+              {
+                title: 'In Progress',
+                subTitle: 'Left 00:00:08',
+                description: 'This is a description.',
+              },
+              {
+                title: 'Waiting',
+                description: 'This is a description.',
+              },
+            ]}
+          />

          {/* Steps - dot */}
-          <Steps current={2} status="error" progressDot>
-            <Steps.Step title="Finished" description="You can hover on the dot." />
-            <Steps.Step title="In Progress" description="You can hover on the dot." />
-            <Steps.Step title="Error" description="You can hover on the dot." />
-            <Steps.Step title="Waiting" description="You can hover on the dot." />
-          </Steps>
+          <Steps
+            current={2}
+            status="error"
+            progressDot
+            items={[
+              {
+                title: 'Finished',
+                description: 'You can hover on the dot.',
+              },
+              {
+                title: 'In Progress',
+                description: 'You can hover on the dot.',
+              },
+              {
+                title: 'Error',
+                description: 'You can hover on the dot.',
+              },
+              {
+                title: 'Waiting',
+                description: 'You can hover on the dot.',
+              },
+            ]}
+          />

          {/* Form - Input */}
          <Form>
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -54,7 +54,7 @@ const PASSED_PROPS: Exclude<keyof ConfigConsumerProps, 'rootPrefixCls' | 'getPre
 ];

 export interface ConfigProviderProps {
-  getTargetContainer?: () => HTMLElement;
+  getTargetContainer?: () => HTMLElement | Window;
  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
  prefixCls?: string;
  iconPrefixCls?: string;
@ -193,7 +193,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
  // Pass the props used by `useContext` directly with child component.
  // These props should merged into `config`.
  PASSED_PROPS.forEach(propName => {
-    const propValue: any = props[propName];
+    const propValue = props[propName];
    if (propValue) {
      (config as any)[propName] = propValue;
    }
@ -203,9 +203,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
  const memoedConfig = useMemo(
    () => config,
    config,
-    (prevConfig: Record<string, any>, currentConfig) => {
-      const prevKeys = Object.keys(prevConfig);
-      const currentKeys = Object.keys(currentConfig);
+    (prevConfig, currentConfig) => {
+      const prevKeys = Object.keys(prevConfig) as Array<keyof typeof config>;
+      const currentKeys = Object.keys(currentConfig) as Array<keyof typeof config>;
      return (
        prevKeys.length !== currentKeys.length ||
        prevKeys.some(key => prevConfig[key] !== currentConfig[key])
@ -297,11 +297,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
    {(_, __, legacyLocale) => (
      <ConfigConsumer>
        {context => (
-          <ProviderChildren
-            parentContext={context}
-            legacyLocale={legacyLocale as Locale}
-            {...props}
-          />
+          <ProviderChildren parentContext={context} legacyLocale={legacyLocale} {...props} />
        )}
      </ConfigConsumer>
    )}
--- 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
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -7,7 +7,7 @@ import { RangePicker as RCRangePicker } from 'rc-picker';
 import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 import * as React from 'react';
 import { forwardRef, useContext, useImperativeHandle } from 'react';
-import type { PickerLocale, RangePickerProps } from '.';
+import type { RangePickerProps } from '.';
 import { Components, getTimeProps } from '.';
 import { ConfigContext } from '../../config-provider';
 import DisabledContext from '../../config-provider/DisabledContext';
@ -80,7 +80,7 @@ export default function generateRangePicker<DateType>(

    // ===================== Disabled =====================
    const disabled = React.useContext(DisabledContext);
-    const mergedDisabled = customDisabled || disabled;
+    const mergedDisabled = customDisabled ?? disabled;

    // ===================== FormItemInput =====================
    const formItemContext = useContext(FormItemInputContext);
@ -100,7 +100,7 @@ export default function generateRangePicker<DateType>(

    return wrapSSR(
      <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
-        {(contextLocale: PickerLocale) => {
+        {contextLocale => {
          const locale = { ...contextLocale, ...props.locale };

          return (
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -7,7 +7,7 @@ import type { GenerateConfig } from 'rc-picker/lib/generate/index';
 import type { PickerMode } from 'rc-picker/lib/interface';
 import * as React from 'react';
 import { forwardRef, useContext, useImperativeHandle } from 'react';
-import type { PickerDateProps, PickerLocale, PickerProps, PickerTimeProps } from '.';
+import type { PickerDateProps, PickerProps, PickerTimeProps } from '.';
 import { Components, getTimeProps } from '.';
 import { ConfigContext } from '../../config-provider';
 import DisabledContext from '../../config-provider/DisabledContext';
@ -104,7 +104,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<

        // ===================== Disabled =====================
        const disabled = React.useContext(DisabledContext);
-        const mergedDisabled = customDisabled || disabled;
+        const mergedDisabled = customDisabled ?? disabled;

        // ===================== FormItemInput =====================
        const formItemContext = useContext(FormItemInputContext);
@ -119,7 +119,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<

        return wrapSSR(
          <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
-            {(contextLocale: PickerLocale) => {
+            {contextLocale => {
              const locale = { ...contextLocale, ...props.locale };

              return (
--- a/components/descriptions/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/descriptions/tests/snapshots/demo-extend.test.ts.snap
@ -40,10 +40,6 @@ 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"
@ -63,10 +59,6 @@ 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"
@ -109,13 +101,9 @@ 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"
+            colspan="2"
          >
            <div
              class="ant-descriptions-item-container"
@ -176,10 +164,6 @@ 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"
@ -196,10 +180,6 @@ 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"
@ -236,10 +216,6 @@ 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"
@ -250,7 +226,7 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="3"
          >
            <span>
              2019-04-24 18:00:00
@ -270,7 +246,7 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="5"
          >
            <span>
              <span
@ -307,10 +283,6 @@ 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"
@ -327,10 +299,6 @@ 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"
@ -361,7 +329,7 @@ exports[`renders ./components/descriptions/demo/border.md extend context correct
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="5"
          >
            <span>
              Data disk type: MongoDB
@ -423,10 +391,6 @@ 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"
@ -443,10 +407,6 @@ 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"
@ -483,10 +443,6 @@ 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"
@ -503,10 +459,6 @@ 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"
@ -537,7 +489,7 @@ exports[`renders ./components/descriptions/demo/responsive.md extend context cor
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="1"
+              colspan="5"
            >
              <span>
                Data disk type: MongoDB
@ -675,10 +627,6 @@ 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"
@ -695,10 +643,6 @@ 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"
@ -735,10 +679,6 @@ 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"
@ -755,10 +695,6 @@ 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"
@ -789,7 +725,7 @@ exports[`renders ./components/descriptions/demo/size.md extend context correctly
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="1"
+              colspan="5"
            >
              <span>
                Data disk type: MongoDB
@ -864,10 +800,6 @@ 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"
@ -887,10 +819,6 @@ 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"
@ -933,10 +861,6 @@ 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"
@ -956,10 +880,6 @@ 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"
@ -1001,16 +921,7 @@ Array [
    <span
      class="ant-switch-inner"
    >
-      <span
-        class="ant-switch-inner-checked"
-      >
-        Border
-      </span>
-      <span
-        class="ant-switch-inner-unchecked"
-      >
-        No Border
-      </span>
+      Border
    </span>
  </button>,
  <div
@ -1087,7 +998,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background: red;"
+              style="background:red"
            >
              <span>
                Product
@ -1096,16 +1007,12 @@ 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"
@ -1122,10 +1029,6 @@ Array [
                Prepaid
              </span>
            </td>
-          </tr>
-          <tr
-            class="ant-descriptions-row"
-          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -1174,7 +1077,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background: red;"
+              style="background:red"
            >
              <span>
                Product
@ -1183,20 +1086,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"
-              style="background: red;"
+              style="background:red"
            >
              <span>
                Billing Mode
@ -1205,20 +1104,16 @@ 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
@ -1227,7 +1122,7 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background: green; color: blue;"
+              style="background:green;color:blue"
            >
              <span>
                YES
@ -1292,7 +1187,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>
@ -1555,7 +1450,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
@ -1675,28 +1570,6 @@ 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"
@ -1711,28 +1584,6 @@ 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"
@ -1751,6 +1602,34 @@ 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"
@ -1771,7 +1650,7 @@ exports[`renders ./components/descriptions/demo/vertical.md extend context corre
        >
          <th
            class="ant-descriptions-item"
-            colspan="1"
+            colspan="2"
          >
            <div
              class="ant-descriptions-item-container"
@ -1783,28 +1662,6 @@ 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"
@ -1823,6 +1680,20 @@ 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"
@ -1873,22 +1744,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Product
            </span>
          </th>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              Cloud Database
-            </span>
-          </td>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1897,22 +1752,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
              Billing Mode
            </span>
          </th>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              Prepaid
-            </span>
-          </td>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1925,6 +1764,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        <tr
          class="ant-descriptions-row"
        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              Cloud Database
+            </span>
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              Prepaid
+            </span>
+          </td>
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1945,25 +1800,9 @@ 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="1"
+            colspan="2"
          >
            <span>
              Usage Time
@ -1976,6 +1815,14 @@ 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
@ -1987,7 +1834,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="1"
+            colspan="3"
          >
            <span>
              Status
@ -1999,7 +1846,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="3"
          >
            <span>
              <span
@ -2028,22 +1875,6 @@ 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"
@ -2052,22 +1883,6 @@ 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"
@ -2080,6 +1895,22 @@ 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"
@ -2094,7 +1925,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="1"
+            colspan="3"
          >
            <span>
              Config Info
@ -2106,7 +1937,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md extend contex
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="3"
          >
            <span>
              Data disk type: MongoDB
--- a/components/descriptions/tests/snapshots/demo.test.ts.snap
+++ b/components/descriptions/tests/snapshots/demo.test.ts.snap
@ -40,10 +40,6 @@ 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"
@ -63,10 +59,6 @@ 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"
@ -109,13 +101,9 @@ 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"
+            colspan="2"
          >
            <div
              class="ant-descriptions-item-container"
@ -176,10 +164,6 @@ 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"
@ -196,10 +180,6 @@ 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"
@ -236,10 +216,6 @@ 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"
@ -250,7 +226,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="3"
          >
            <span>
              2019-04-24 18:00:00
@ -270,7 +246,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="5"
          >
            <span>
              <span
@ -307,10 +283,6 @@ 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"
@ -327,10 +299,6 @@ 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"
@ -361,7 +329,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
          </th>
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="5"
          >
            <span>
              Data disk type: MongoDB
@ -423,10 +391,6 @@ 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"
@ -443,10 +407,6 @@ 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"
@ -483,10 +443,6 @@ 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"
@ -503,10 +459,6 @@ 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"
@ -537,7 +489,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="1"
+              colspan="5"
            >
              <span>
                Data disk type: MongoDB
@ -675,10 +627,6 @@ 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"
@ -695,10 +643,6 @@ 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"
@ -735,10 +679,6 @@ 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"
@ -755,10 +695,6 @@ 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"
@ -789,7 +725,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
            </th>
            <td
              class="ant-descriptions-item-content"
-              colspan="1"
+              colspan="5"
            >
              <span>
                Data disk type: MongoDB
@ -864,10 +800,6 @@ 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"
@ -887,10 +819,6 @@ 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"
@ -933,10 +861,6 @@ 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"
@ -956,10 +880,6 @@ 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"
@ -1001,16 +921,7 @@ Array [
    <span
      class="ant-switch-inner"
    >
-      <span
-        class="ant-switch-inner-checked"
-      >
-        Border
-      </span>
-      <span
-        class="ant-switch-inner-unchecked"
-      >
-        No Border
-      </span>
+      Border
    </span>
  </button>,
  <div
@ -1087,7 +998,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background: red;"
+              style="background:red"
            >
              <span>
                Product
@ -1096,16 +1007,12 @@ 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"
@ -1122,10 +1029,6 @@ Array [
                Prepaid
              </span>
            </td>
-          </tr>
-          <tr
-            class="ant-descriptions-row"
-          >
            <th
              class="ant-descriptions-item-label"
              colspan="1"
@ -1174,7 +1077,7 @@ Array [
            <th
              class="ant-descriptions-item-label"
              colspan="1"
-              style="background: red;"
+              style="background:red"
            >
              <span>
                Product
@ -1183,20 +1086,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"
-              style="background: red;"
+              style="background:red"
            >
              <span>
                Billing Mode
@ -1205,20 +1104,16 @@ 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
@ -1227,7 +1122,7 @@ Array [
            <td
              class="ant-descriptions-item-content"
              colspan="1"
-              style="background: green; color: blue;"
+              style="background:green;color:blue"
            >
              <span>
                YES
@ -1292,7 +1187,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>
@ -1555,7 +1450,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
@ -1675,28 +1570,6 @@ 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"
@ -1711,28 +1584,6 @@ 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"
@ -1751,6 +1602,34 @@ 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"
@ -1771,7 +1650,7 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
        >
          <th
            class="ant-descriptions-item"
-            colspan="1"
+            colspan="2"
          >
            <div
              class="ant-descriptions-item-container"
@ -1783,28 +1662,6 @@ 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"
@ -1823,6 +1680,20 @@ 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"
@ -1873,22 +1744,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Product
            </span>
          </th>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              Cloud Database
-            </span>
-          </td>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1897,22 +1752,6 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
              Billing Mode
            </span>
          </th>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
-          <td
-            class="ant-descriptions-item-content"
-            colspan="1"
-          >
-            <span>
-              Prepaid
-            </span>
-          </td>
-        </tr>
-        <tr
-          class="ant-descriptions-row"
-        >
          <th
            class="ant-descriptions-item-label"
            colspan="1"
@ -1925,6 +1764,22 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        <tr
          class="ant-descriptions-row"
        >
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              Cloud Database
+            </span>
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            <span>
+              Prepaid
+            </span>
+          </td>
          <td
            class="ant-descriptions-item-content"
            colspan="1"
@ -1945,25 +1800,9 @@ 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="1"
+            colspan="2"
          >
            <span>
              Usage Time
@ -1976,6 +1815,14 @@ 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
@ -1987,7 +1834,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="1"
+            colspan="3"
          >
            <span>
              Status
@ -1999,7 +1846,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="3"
          >
            <span>
              <span
@ -2028,22 +1875,6 @@ 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"
@ -2052,22 +1883,6 @@ 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"
@ -2080,6 +1895,22 @@ 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"
@ -2094,7 +1925,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <th
            class="ant-descriptions-item-label"
-            colspan="1"
+            colspan="3"
          >
            <span>
              Config Info
@ -2106,7 +1937,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
        >
          <td
            class="ant-descriptions-item-content"
-            colspan="1"
+            colspan="3"
          >
            <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,6 +107,7 @@ Array [

 exports[`renders ./components/divider/demo/vertical.md extend context correctly 1`] = `
 Array [
+  Text,
  <div
    class="ant-divider ant-divider-vertical"
    role="separator"
@ -178,7 +179,7 @@ Array [
  >
    <span
      class="ant-divider-inner-text"
-      style="margin-left: 0px;"
+      style="margin-left:0"
    >
      Left Text with 0 orientationMargin
    </span>
@ -192,7 +193,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,6 +107,7 @@ Array [

 exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
 Array [
+  Text,
  <div
    class="ant-divider ant-divider-vertical"
    role="separator"
@ -178,7 +179,7 @@ Array [
  >
    <span
      class="ant-divider-inner-text"
-      style="margin-left: 0px;"
+      style="margin-left:0"
    >
      Left Text with 0 orientationMargin
    </span>
@ -192,7 +193,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
--- 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"
@ -195,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"
@ -300,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,33 +311,16 @@ exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
      </span>
    </button>
  </div>
-  <div
-    class="ant-drawer ant-drawer-right ant-drawer-inline"
-    tabindex="-1"
-  >
-    <div
-      aria-hidden="true"
-      data-sentinel="start"
-      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
-      tabindex="0"
-    />
-    <div
-      aria-hidden="true"
-      data-sentinel="end"
-      style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
-      tabindex="0"
-    />
-  </div>
 </div>
 `;

 exports[`renders ./components/drawer/demo/render-panel.md correctly 1`] = `
 <div
-  style="padding: 32px; background: rgb(230, 230, 230);"
+  style="padding:32px;background:#e6e6e6"
 >
  <div
    class="ant-drawer ant-drawer-pure ant-drawer-right"
-    style="height: 300px;"
+    style="height:300px"
  >
    <div
      class="ant-drawer-wrapper-body"
@ -395,13 +378,103 @@ exports[`renders ./components/drawer/demo/render-panel.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/drawer/demo/scroll-debug.md correctly 1`] = `
+<div
+  style="position:relative;z-index:999999"
+>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Drawer
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Drawer2
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Modal
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        aria-checked="false"
+        class="ant-switch"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          Modal2
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/drawer/demo/size.md correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center"
 >
  <div
    class="ant-space-item"
-    style="margin-right: 8px;"
+    style="margin-right:8px"
  >
    <button
      class="ant-btn ant-btn-primary"
--- a/components/drawer/demo/scroll-debug.md
+++ b/components/drawer/demo/scroll-debug.md
@ -0,0 +1,75 @@
+---
+order: 999
+title:
+  zh-CN: 滚动锁定调试
+  en-US: Scroll Debug
+debug: true
+---
+
+## zh-CN
+
+当 Modal 和 Drawer 共同作用时的滚动锁定调试。
+
+## en-US
+
+Scroll lock debug with Modal & Drawer.
+
+```tsx
+import { Switch, Space, Drawer, Modal } from 'antd';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  const [drawer, setDrawer] = useState(false);
+  const [drawer2, setDrawer2] = useState(false);
+  const [modal, setModal] = useState(false);
+  const [modal2, setModal2] = useState(false);
+
+  return (
+    <div style={{ position: 'relative', zIndex: 999999 }}>
+      <Space>
+        <Switch
+          checkedChildren="Drawer"
+          unCheckedChildren="Drawer"
+          checked={drawer}
+          onChange={() => setDrawer(!drawer)}
+        />
+        <Switch
+          checkedChildren="Drawer2"
+          unCheckedChildren="Drawer2"
+          checked={drawer2}
+          onChange={() => setDrawer2(!drawer2)}
+        />
+        <Switch
+          checkedChildren="Modal"
+          unCheckedChildren="Modal"
+          checked={modal}
+          onChange={() => setModal(!modal)}
+        />
+        <Switch
+          checkedChildren="Modal2"
+          unCheckedChildren="Modal2"
+          checked={modal2}
+          onChange={() => setModal2(!modal2)}
+        />
+      </Space>
+      <Drawer title="Drawer" open={drawer}>
+        Some contents...
+        <Drawer title="Drawer Sub" open={drawer}>
+          Sub contents...
+        </Drawer>
+      </Drawer>
+      <Drawer title="Drawer2" open={drawer2}>
+        Some contents...
+      </Drawer>
+      <Modal title="Modal" open={modal}>
+        Some contents...
+      </Modal>
+      <Modal title="Modal2" open={modal2}>
+        Some contents...
+      </Modal>
+    </div>
+  );
+};
+
+export default App;
+```
--- a/components/drawer/style/motion.tsx
+++ b/components/drawer/style/motion.tsx
@ -48,7 +48,9 @@ const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
          sharedPanelMotion,
          {
            '&-enter, &-appear': {
-              transform: 'translateX(-100%)',
+              '&-start': {
+                transform: 'translateX(-100%) !important',
+              },
              '&-active': {
                transform: 'translateX(0)',
              },
@ -67,7 +69,9 @@ const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
          sharedPanelMotion,
          {
            '&-enter, &-appear': {
-              transform: 'translateX(100%)',
+              '&-start': {
+                transform: 'translateX(100%) !important',
+              },
              '&-active': {
                transform: 'translateX(0)',
              },
@ -86,7 +90,9 @@ const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
          sharedPanelMotion,
          {
            '&-enter, &-appear': {
-              transform: 'translateY(-100%)',
+              '&-start': {
+                transform: 'translateY(-100%) !important',
+              },
              '&-active': {
                transform: 'translateY(0)',
              },
@ -105,7 +111,9 @@ const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
          sharedPanelMotion,
          {
            '&-enter, &-appear': {
-              transform: 'translateY(100%)',
+              '&-start': {
+                transform: 'translateY(100%) !important',
+              },
              '&-active': {
                transform: 'translateY(0)',
              },
--- 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,11 +516,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
            role="img"
          >
            <svg
@ -570,7 +569,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"
@ -581,11 +580,10 @@ 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 ant-btn-loading-icon-motion-appear ant-btn-loading-icon-motion-appear-start ant-btn-loading-icon-motion"
+            class="anticon anticon-loading anticon-spin"
            role="img"
          >
            <svg
@ -635,7 +633,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"
@ -726,7 +724,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>
@ -766,7 +764,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>
@ -803,15 +801,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"
@ -824,7 +822,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"
@ -837,7 +835,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"
@ -855,11 +853,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"
@ -872,7 +870,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"
@ -885,7 +883,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"
@ -903,116 +901,10 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `

 exports[`renders ./components/dropdown/demo/render-panel.md correctly 1`] = `
 <div
-  style="padding-bottom: 0px; position: relative; min-width: 0;"
+  style="padding-bottom:0;position:relative;width:fit-content;min-width:0"
 >
  <span
-    class="ant-dropdown-trigger ant-dropdown-open"
-  />
-  <div>
-    <div
-      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"
-        data-menu-list="true"
-        role="menu"
-        tabindex="0"
-      >
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          data-menu-id="rc-menu-uuid-test-1"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <li
-          aria-disabled="true"
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled"
-          data-menu-id="rc-menu-uuid-test-2"
-          role="menuitem"
-        >
-          <span
-            aria-label="smile"
-            class="anticon anticon-smile ant-dropdown-menu-item-icon"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="smile"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
-              />
-            </svg>
-          </span>
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item (disabled)
-            </a>
-          </span>
-        </li>
-        <li
-          aria-disabled="true"
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
-          data-menu-id="rc-menu-uuid-test-3"
-          role="menuitem"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item (disabled)
-            </a>
-          </span>
-        </li>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-danger ant-dropdown-menu-item-only-child"
-          data-menu-id="rc-menu-uuid-test-4"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            a danger item
-          </span>
-        </li>
-      </ul>
-      <div
-        aria-hidden="true"
-        style="display: none;"
-      />
-    </div>
-  </div>
-  <div
-    style="position: absolute; top: 0px; left: 0px; width: 100%;"
+    class="ant-dropdown-trigger"
  />
 </div>
 `;
@ -1026,7 +918,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>
@ -1066,7 +958,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>
@ -1106,7 +998,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/tests/dropdown-button.test.tsx
+++ b/components/dropdown/tests/dropdown-button.test.tsx
@ -7,23 +7,25 @@ import type { DropdownProps } from '../dropdown';
 import { render } from '../../../tests/utils';

 let dropdownProps: DropdownProps;
+
 jest.mock('../dropdown', () => {
  const ActualDropdown = jest.requireActual('../dropdown');
  const ActualDropdownComponent = ActualDropdown.default;
  const h: typeof React = jest.requireActual('react');

-  const mockedDropdown = (props: DropdownProps) => {
+  const MockedDropdown: React.FC<DropdownProps> & {
+    Button: typeof ActualDropdownComponent.Button;
+  } = props => {
    dropdownProps = props;
    const { children, ...restProps } = props;
    return h.createElement(ActualDropdownComponent, { ...restProps }, children);
  };
-  mockedDropdown.defaultProps = ActualDropdownComponent.defaultProps;
-  mockedDropdown.Button = ActualDropdownComponent.Button;
+  MockedDropdown.Button = ActualDropdownComponent.Button;

  return {
    ...ActualDropdown,
    __esModule: true,
-    default: mockedDropdown,
+    default: MockedDropdown,
  };
 });

--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@ -29,6 +29,7 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
 }

 interface DropdownButtonInterface extends React.FC<DropdownButtonProps> {
+  /** @internal */
  __ANT_BUTTON: boolean;
 }

@ -72,7 +73,7 @@ const DropdownButton: DropdownButtonInterface = props => {
  const buttonPrefixCls = `${prefixCls}-button`;
  const [wrapSSR, hashId] = useStyle(prefixCls);

-  const dropdownProps = {
+  const dropdownProps: DropdownProps = {
    align,
    overlay,
    disabled,
@ -84,7 +85,7 @@ const DropdownButton: DropdownButtonInterface = props => {
    overlayClassName,
    overlayStyle,
    destroyPopupOnHide,
-  } as DropdownProps;
+  };

  if ('open' in props) {
    dropdownProps.open = open;
@ -113,7 +114,7 @@ const DropdownButton: DropdownButtonInterface = props => {

  const rightButton = <Button type={type} danger={danger} icon={icon} />;

-  const [leftButtonToRender, rightButtonToRender] = buttonsRender!([leftButton, rightButton]);
+  const [leftButtonToRender, rightButtonToRender] = buttonsRender([leftButton, rightButton]);

  return wrapSSR(
    <ButtonGroup {...restProps} className={classNames(buttonPrefixCls, className, hashId)}>
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -94,7 +94,7 @@ const Dropdown: DropdownInterface = props => {
    if (transitionName !== undefined) {
      return transitionName;
    }
-    if (placement.indexOf('top') >= 0) {
+    if (placement.includes('top')) {
      return `${rootPrefixCls}-slide-down`;
    }
    return `${rootPrefixCls}-slide-up`;
@ -103,7 +103,7 @@ const Dropdown: DropdownInterface = props => {
  const getPlacement = () => {
    const { placement } = props;
    if (!placement) {
-      return direction === 'rtl' ? ('bottomRight' as Placement) : ('bottomLeft' as Placement);
+      return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
    }

    if (placement.includes('Center')) {
@ -133,6 +133,8 @@ const Dropdown: DropdownInterface = props => {
    // Deprecated
    visible,
    onVisibleChange,
+    mouseEnterDelay = 0.15,
+    mouseLeaveDelay = 0.1,
  } = props;

  if (process.env.NODE_ENV !== 'production') {
@ -165,8 +167,8 @@ const Dropdown: DropdownInterface = props => {
  });

  const triggerActions = disabled ? [] : trigger;
-  let alignPoint;
-  if (triggerActions && triggerActions.indexOf('contextMenu') !== -1) {
+  let alignPoint: boolean;
+  if (triggerActions && triggerActions.includes('contextMenu')) {
    alignPoint = true;
  }

@ -200,9 +202,9 @@ const Dropdown: DropdownInterface = props => {
    // So we need render the element to check and pass back to rc-dropdown.
    const { overlay } = props;

-    let overlayNode;
+    let overlayNode: React.ReactNode;
    if (typeof overlay === 'function') {
-      overlayNode = (overlay as OverlayFunc)();
+      overlayNode = overlay();
    } else {
      overlayNode = overlay;
    }
@ -238,8 +240,10 @@ const Dropdown: DropdownInterface = props => {
  // ============================ Render ============================
  return wrapSSR(
    <RcDropdown
-      alignPoint={alignPoint}
+      alignPoint={alignPoint!}
      {...props}
+      mouseEnterDelay={mouseEnterDelay}
+      mouseLeaveDelay={mouseLeaveDelay}
      visible={mergedOpen}
      builtinPlacements={builtinPlacements}
      arrow={!!arrow}
@ -259,11 +263,6 @@ const Dropdown: DropdownInterface = props => {

 Dropdown.Button = DropdownButton;

-Dropdown.defaultProps = {
-  mouseEnterDelay: 0.15,
-  mouseLeaveDelay: 0.1,
-};
-
 // We don't care debug panel
 const PurePanel = genPurePanel(Dropdown, 'dropdown', prefixCls => prefixCls);

--- a/components/empty/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/empty/tests/snapshots/demo-extend.test.ts.snap
@ -89,16 +89,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
    <span
      class="ant-switch-inner"
    >
-      <span
-        class="ant-switch-inner-checked"
-      >
-        customize
-      </span>
-      <span
-        class="ant-switch-inner-unchecked"
-      >
-        default
-      </span>
+      default
    </span>
  </button>
  <div
@ -113,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"
@ -122,17 +113,16 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_-test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -144,13 +134,13 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      </div>
      <div>
        <div
-          class="ant-select-dropdown ant-select-dropdown-empty ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-          style="opacity: 0;"
+          class="ant-select-dropdown ant-select-dropdown-empty"
+          style="opacity:0"
        >
          <div>
            <div
              class="ant-select-item-empty"
-              id="rc_select_test_list"
+              id="undefined_list"
              role="listbox"
            >
              <div
@ -205,7 +195,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -234,7 +224,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"
@ -244,15 +234,14 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
        >
          <input
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -264,8 +253,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 ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-          style="opacity: 0;"
+          class="ant-select-dropdown ant-tree-select-dropdown ant-select-dropdown-empty"
+          style="opacity:0"
        >
          <div>
            <div
@ -324,7 +313,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -353,7 +342,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"
@ -363,12 +352,11 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
        >
          <input
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
-            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -380,8 +368,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 ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-          style="opacity: 0;"
+          class="ant-select-dropdown ant-cascader-dropdown ant-select-dropdown-empty"
+          style="opacity:0"
        >
          <div>
            <div
@ -455,7 +443,7 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -500,7 +488,6 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              <input
                class="ant-checkbox-input"
                type="checkbox"
-                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -528,8 +515,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          </span>
          <div>
            <div
-              class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-              style="opacity: 0;"
+              class="ant-dropdown"
+              style="opacity:0"
            >
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -539,7 +526,6 @@ 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"
                >
@ -551,8 +537,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    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;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -573,7 +559,6 @@ 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"
                >
@ -585,8 +570,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    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;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -608,12 +593,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 ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-                    style="opacity: 0;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -634,8 +619,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </div>
                <div>
                  <div
-                    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;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -661,6 +646,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
            class="ant-transfer-list-header-selected"
          >
            0
+            <!-- -->
+            <!-- -->
            item
          </span>
          <span
@ -790,7 +777,6 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
              <input
                class="ant-checkbox-input"
                type="checkbox"
-                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -818,8 +804,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
          </span>
          <div>
            <div
-              class="ant-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up"
-              style="opacity: 0;"
+              class="ant-dropdown"
+              style="opacity:0"
            >
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
@ -829,7 +815,6 @@ 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"
                >
@ -841,8 +826,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    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;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -863,7 +848,6 @@ 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"
                >
@ -875,8 +859,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </li>
                <div>
                  <div
-                    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;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -898,12 +882,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 ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-                    style="opacity: 0;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -924,8 +908,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
                </div>
                <div>
                  <div
-                    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;"
+                    class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                    style="opacity:0"
                  >
                    <div
                      class="ant-tooltip-content"
@ -951,6 +935,8 @@ exports[`renders ./components/empty/demo/config-provider.md extend context corre
            class="ant-transfer-list-header-selected"
          >
            0
+            <!-- -->
+            <!-- -->
            item
          </span>
          <span
@ -1017,7 +1003,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"
@ -1035,7 +1021,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
@ -1193,7 +1179,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"
@ -1204,7 +1190,7 @@ exports[`renders ./components/empty/demo/customize.md extend context correctly 1
    class="ant-empty-description"
  >
    <span>
-      Customize 
+      Customize
      <a
        href="#API"
      >
--- a/components/empty/tests/snapshots/demo.test.ts.snap
+++ b/components/empty/tests/snapshots/demo.test.ts.snap
@ -89,16 +89,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
    <span
      class="ant-switch-inner"
    >
-      <span
-        class="ant-switch-inner-checked"
-      >
-        customize
-      </span>
-      <span
-        class="ant-switch-inner-unchecked"
-      >
-        default
-      </span>
+      default
    </span>
  </button>
  <div
@ -113,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"
@ -122,17 +113,16 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
          class="ant-select-selection-search"
        >
          <input
-            aria-activedescendant="rc_select_test_list_test"
+            aria-activedescendant="undefined_list_0"
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -145,7 +135,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -174,7 +164,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"
@ -184,15 +174,14 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
        >
          <input
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_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=""
@ -205,7 +194,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -234,7 +223,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"
@ -244,12 +233,11 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
        >
          <input
            aria-autocomplete="list"
-            aria-controls="rc_select_test_list"
+            aria-controls="undefined_list"
            aria-haspopup="listbox"
-            aria-owns="rc_select_test_list"
+            aria-owns="undefined_list"
            autocomplete="off"
            class="ant-select-selection-search-input"
-            id="rc_select_test"
            role="combobox"
            type="search"
            value=""
@ -262,7 +250,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
      <span
        aria-hidden="true"
        class="ant-select-arrow"
-        style="user-select: none;"
+        style="user-select:none;-webkit-user-select:none"
        unselectable="on"
      >
        <span
@ -307,7 +295,6 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
              <input
                class="ant-checkbox-input"
                type="checkbox"
-                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -337,6 +324,8 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
            class="ant-transfer-list-header-selected"
          >
            0
+            <!-- -->
+            <!-- -->
            item
          </span>
          <span
@ -466,7 +455,6 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
              <input
                class="ant-checkbox-input"
                type="checkbox"
-                value=""
              />
              <span
                class="ant-checkbox-inner"
@ -496,6 +484,8 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
            class="ant-transfer-list-header-selected"
          >
            0
+            <!-- -->
+            <!-- -->
            item
          </span>
          <span
@ -562,7 +552,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"
@ -580,7 +570,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
@ -738,7 +728,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
 >
  <div
    class="ant-empty-image"
-    style="height: 60px;"
+    style="height:60px"
  >
    <img
      alt="empty"
@ -749,7 +739,7 @@ exports[`renders ./components/empty/demo/customize.md correctly 1`] = `
    class="ant-empty-description"
  >
    <span>
-      Customize 
+      Customize
      <a
        href="#API"
      >
--- a/components/float-button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/float-button/tests/snapshots/demo-extend.test.ts.snap
@ -2,7 +2,7 @@

 exports[`renders ./components/float-button/demo/back-top.md extend context correctly 1`] = `
 <div
-  style="height: 500vh; padding: 10px;"
+  style="height:500vh;padding:10px"
 >
  <div>
    Scroll to bottom
@ -71,7 +71,7 @@ exports[`renders ./components/float-button/demo/description.md extend context co
 Array [
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 24px;"
+    style="right:24px"
    type="button"
  >
    <div
@ -113,7 +113,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 94px;"
+    style="right:94px"
    type="button"
  >
    <div
@ -132,7 +132,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 164px;"
+    style="right:164px"
    type="button"
  >
    <div
@ -179,7 +179,7 @@ exports[`renders ./components/float-button/demo/group.md extend context correctl
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
-    style="right: 24px;"
+    style="right:24px"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -259,7 +259,7 @@ Array [
  </div>,
  <div
    class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
-    style="right: 94px;"
+    style="right:94px"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -423,7 +423,7 @@ exports[`renders ./components/float-button/demo/shape.md extend context correctl
 Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin: 20px;"
+    style="margin:20px"
  >
    <label
      class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -546,8 +546,8 @@ exports[`renders ./components/float-button/demo/tooltip.md extend context correc
    </div>
    <div>
      <div
-        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
-        style="opacity: 0;"
+        class="ant-tooltip"
+        style="opacity:0"
      >
        <div
          class="ant-tooltip-content"
@ -578,7 +578,7 @@ exports[`renders ./components/float-button/demo/type.md extend context correctly
 Array [
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    style="right: 24px;"
+    style="right:24px"
    type="button"
  >
    <div
@ -618,7 +618,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-    style="right: 94px;"
+    style="right:94px"
    type="button"
  >
    <div
--- a/components/float-button/tests/snapshots/demo.test.ts.snap
+++ b/components/float-button/tests/snapshots/demo.test.ts.snap
@ -2,7 +2,7 @@

 exports[`renders ./components/float-button/demo/back-top.md correctly 1`] = `
 <div
-  style="height: 500vh; padding: 10px;"
+  style="height:500vh;padding:10px"
 >
  <div>
    Scroll to bottom
@ -71,7 +71,7 @@ exports[`renders ./components/float-button/demo/description.md correctly 1`] = `
 Array [
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 24px;"
+    style="right:24px"
    type="button"
  >
    <div
@ -113,7 +113,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 94px;"
+    style="right:94px"
    type="button"
  >
    <div
@ -132,7 +132,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-square"
-    style="right: 164px;"
+    style="right:164px"
    type="button"
  >
    <div
@ -179,7 +179,7 @@ exports[`renders ./components/float-button/demo/group.md correctly 1`] = `
 Array [
  <div
    class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
-    style="right: 24px;"
+    style="right:24px"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
@ -259,7 +259,7 @@ Array [
  </div>,
  <div
    class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
-    style="right: 94px;"
+    style="right:94px"
  >
    <button
      class="ant-float-btn ant-float-btn-default ant-float-btn-square"
@ -423,7 +423,7 @@ exports[`renders ./components/float-button/demo/shape.md correctly 1`] = `
 Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
-    style="margin: 20px;"
+    style="margin:20px"
  >
    <label
      class="ant-radio-wrapper ant-radio-wrapper-checked"
@ -552,7 +552,7 @@ exports[`renders ./components/float-button/demo/type.md correctly 1`] = `
 Array [
  <button
    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    style="right: 24px;"
+    style="right:24px"
    type="button"
  >
    <div
@ -592,7 +592,7 @@ Array [
  </button>,
  <button
    class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-    style="right: 94px;"
+    style="right:94px"
    type="button"
  >
    <div
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@ -13,7 +13,7 @@ interface FormItemInputMiscProps {
  warnings: React.ReactNode[];
  marginBottom?: number | null;
  onErrorVisibleChanged?: (visible: boolean) => void;
-  /** @private Internal Usage, do not use in any of your production. */
+  /** @internal do not use in any of your production. */
  _internalItemRender?: {
    mark: string;
    render: (
--- 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/snapshots/index.test.tsx.snap
+++ b/components/form/tests/snapshots/index.test.tsx.snap
@ -887,14 +887,7 @@ exports[`Form form should support disabled 1`] = `
              />
              <span
                class="ant-switch-inner"
-              >
-                <span
-                  class="ant-switch-inner-checked"
-                />
-                <span
-                  class="ant-switch-inner-unchecked"
-                />
-              </span>
+              />
            </button>
          </div>
        </div>
--- a/Show More
+++ b/Show More