chore: merge master into feature

2024-11-24 02:59:58 +08:00 · 2023-11-14 02:59:19 +08:00 · 2023-11-14 02:59:19 +08:00 · 4266517ddd
commit 4266517ddd
parent c8637cf03a ac39eab16e
28 changed files with 1125 additions and 157 deletions
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@ -25,10 +25,10 @@ const RESPONSIVE_SM = 1200;

 const locales = {
  cn: {
-    message:
-      '语雀公益计划：大学生认证教育邮箱，即可免费获得语雀会员。语雀，支付宝匠心打造的在线文档平台。',
-    shortMessage: '支付宝语雀 · 大学生公益计划火热进行中！',
-    more: '了解更多',
+    message: '第十八届 D2 终端技术大会火热来袭，以技术会友，一起分享技术的乐趣。',
+    shortMessage: '第十八届 D2 终端技术大会火热来袭！',
+    more: '点击报名',
+    link: 'https://d2.alibabatech.com/',
  },
  en: {
    message: '',
@ -366,26 +366,21 @@ const Header: React.FC = () => {
        </Popover>
      )}
      {isZhCN && bannerVisible && (
-        <ConfigProvider theme={{ token: { colorInfoBg: '#daf5eb', colorTextBase: '#000' } }}>
+        <ConfigProvider theme={{ token: { colorInfoBg: '#ceebf9', colorTextBase: '#000' } }}>
          <Alert
            className={styles.banner}
            message={
              <>
-                <img
-                  className={styles.icon}
-                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
-                  alt="yuque"
-                />
                <span>{isMobile ? locale.shortMessage : locale.message}</span>
                <a
                  className={styles.link}
-                  href="https://www.yuque.com/yuque/blog/welfare-edu?source=antd"
+                  href={locale.link}
                  target="_blank"
                  rel="noreferrer"
                  onClick={() => {
                    window.gtag?.('event', '点击', {
                      event_category: 'top_banner',
-                      event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd',
+                      event_label: locale.link,
                    });
                  }}
                >
--- a/.github/workflows/issue-labeled.yml
+++ b/.github/workflows/issue-labeled.yml
@ -40,7 +40,9 @@ jobs:
          body: |
            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.

-            你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+            你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+
+            > [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F)

            ![](https://gw.alipayobjects.com/zos/antfincdn/y9kwg7DVCd/reproduce.gif)

--- a/.github/workflows/pr-open-check.yml
+++ b/.github/workflows/pr-open-check.yml
@ -19,10 +19,13 @@ jobs:
          refuse-issue-label: '🎱 Collaborate PR only'
          need-creator-authority: 'write'
          comment: |
-            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. This PR is temporarily not accepted. Thank you again for your contribution! 😊
+            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. Thank you for your contribution! 😊

-            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认，暂时不接受 PR，再次感谢你的贡献！😊
-          close: true
+            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认！感谢您的贡献！😊
+          close: false
+          reviewers: |
+            MadCcc
+            zombieJ

  check-changelog:
    permissions:
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -25,9 +25,7 @@ tag: vVERSION
 - 🐞 Fix Descriptions use `children` structure missing the Descriptions.Item `key` prop. [#45757](https://github.com/ant-design/ant-design/pull/45757)
 - 🐞 Fix Message that token specified in component scope not work. [#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
 - 🐞 Fix Popconfirm not compatible with `visible` prop. [#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
- Tag
-  - 🐞 Fix Tag default background color not correct. [#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
-  - 🐞 Adjust Tag default background token to `colorBgContainer`. [#45700](https://github.com/ant-design/ant-design/pull/45700) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Tag default background color not correct. [#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
 - 💄 Fix Notification that `style.width` not work. [#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
 - 🐞 Fix App console unexpected attr warning when set `component=false`. [#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
 - TypeScript
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -25,9 +25,7 @@ tag: vVERSION
 - 🐞 修复 Descriptions 使用 `children` 结构语法糖时，会丢失 Descriptions.Item 的 `key` 的问题。[#45757](https://github.com/ant-design/ant-design/pull/45757)
 - 🐞 修复 Message 组件在组件范围设置全局 `token` 无效的问题。[#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc)
 - 🐞 修复 Popconfirm 不兼容 `visible` 的问题。[#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123)
- Tag
-  - 🐞 修复默认 Tag 的背景颜色不正确的问题。[#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
-  - 🐞 修改 Tag 的默认背景色 `token` 为 `colorBgContainer`。[#45700](https://github.com/ant-design/ant-design/pull/45700) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复默认 Tag 的背景颜色不正确的问题。[#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang)
 - 💄 修复 Notification 组件设置 `style.width` 无效的问题。[#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc)
 - 🐞 修复 App 设置 `component=false` 时，会报非预期的属性警告的问题。[#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan)
 - TypeScript
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@ -32,13 +32,17 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoplay | Whether to scroll automatically | boolean | false |  |
+| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` |  |
 | dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true |  |
-| waitForAnimate | Whether to wait for the animation when switching | boolean | false |  |
+| fade | Whether to use fade transition | boolean | false |  |
+| infinite | Infinitely wrap around contents | boolean | true |  |
+| speed | Animation speed in milliseconds | number | 500 |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
 | afterChange | Callback function called after the current index changes | (current: number) => void | - |  |
 | beforeChange | Callback function called before the current index changes | (current: number, next: number) => void | - |  |
+| waitForAnimate | Whether to wait for the animation when switching | boolean | false |  |

 ## Methods

--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@ -33,13 +33,17 @@ demo:
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoplay | 是否自动切换 | boolean | false |  |
+| autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` |  |
 | dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true |  |
-| waitForAnimate | 是否等待切换动画 | boolean | false |  |
+| fade | 使用渐变切换动效 | boolean | false |  |
+| infinite | 是否无限循环切换（实现方式是复制两份 children 元素，如果子元素有副作用则可能会引发 bug） | boolean | true |  |
+| speed | 切换动效的时间（毫秒） | number | 500 |  |
 | easing | 动画效果 | string | `linear` |  |
 | effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` |  |
 | afterChange | 切换面板的回调 | (current: number) => void | - |  |
 | beforeChange | 切换面板的回调 | (current: number, next: number) => void | - |  |
+| waitForAnimate | 是否等待切换动画 | boolean | false |  |

 ## 方法

--- a/components/carousel/style/index.ts
+++ b/components/carousel/style/index.ts
@ -232,7 +232,7 @@ const genCarouselStyle: GenerateStyle<CarouselToken> = (token) => {
            fontSize: 0,
            background: token.colorBgContainer,
            border: 0,
-            borderRadius: 1,
+            borderRadius: token.dotHeight,
            outline: 'none',
            cursor: 'pointer',
            opacity: 0.3,
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@ -7,6 +7,7 @@ import { responsiveArray } from '../_util/responsiveObserver';
 import { ConfigContext } from '../config-provider';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import { Row } from '../grid';
+import type { RowProps } from '../grid';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { PaginationConfig } from '../pagination';
 import Pagination from '../pagination';
@ -28,7 +29,7 @@ export type ColumnCount = number;
 export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

 export interface ListGridType {
-  gutter?: number;
+  gutter?: RowProps['gutter'];
  column?: ColumnCount;
  xs?: ColumnCount;
  sm?: ColumnCount;
--- a/components/menu/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/menu/tests/snapshots/demo-extend.test.ts.snap
@ -1227,6 +1227,740 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct
      </div>
    </div>
  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
+      data-menu-list="true"
+      role="menu"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-item ant-menu-item-selected"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          aria-label="pie-chart"
+          class="anticon anticon-pie-chart ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="pie-chart"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 1
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            Option 1
+          </div>
+        </div>
+      </div>
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-2"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          aria-label="desktop"
+          class="anticon anticon-desktop ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="desktop"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 2
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            Option 2
+          </div>
+        </div>
+      </div>
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-3"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          aria-label="container"
+          class="anticon anticon-container ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="container"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 3
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            Option 3
+          </div>
+        </div>
+      </div>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
+        role="none"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-sub1-popup"
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-sub1"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-vertical"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-sub1-popup"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-5"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 5
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-6"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 6
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-7"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 7
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-8"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 8
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </ul>
+        </div>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-vertical"
+        role="none"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-sub2-popup"
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-sub2"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="appstore"
+            class="anticon anticon-appstore ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="appstore"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Two
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-vertical"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-sub2-popup"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-9"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 9
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-10"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                Option 10
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-submenu ant-menu-submenu-vertical"
+              role="none"
+            >
+              <div
+                aria-controls="rc-menu-uuid-test-sub3-popup"
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="ant-menu-submenu-title"
+                data-menu-id="rc-menu-uuid-test-sub3"
+                role="menuitem"
+                tabindex="-1"
+              >
+                <span
+                  class="ant-menu-title-content"
+                >
+                  Submenu
+                </span>
+                <i
+                  class="ant-menu-submenu-arrow"
+                />
+              </div>
+              <div
+                class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
+                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+              >
+                <ul
+                  class="ant-menu ant-menu-sub ant-menu-vertical"
+                  data-menu-list="true"
+                  id="rc-menu-uuid-test-sub3-popup"
+                  role="menu"
+                >
+                  <li
+                    class="ant-menu-item ant-menu-item-only-child"
+                    data-menu-id="rc-menu-uuid-test-11"
+                    role="menuitem"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="ant-menu-title-content"
+                    >
+                      Option 11
+                    </span>
+                  </li>
+                  <div
+                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                      style="position: absolute; top: 0px; left: 0px;"
+                    />
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
+                    </div>
+                  </div>
+                  <li
+                    class="ant-menu-item ant-menu-item-only-child"
+                    data-menu-id="rc-menu-uuid-test-12"
+                    role="menuitem"
+                    tabindex="-1"
+                  >
+                    <span
+                      class="ant-menu-title-content"
+                    >
+                      Option 12
+                    </span>
+                  </li>
+                  <div
+                    class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+                  >
+                    <div
+                      class="ant-tooltip-arrow"
+                      style="position: absolute; top: 0px; left: 0px;"
+                    />
+                    <div
+                      class="ant-tooltip-content"
+                    >
+                      <div
+                        class="ant-tooltip-inner"
+                        role="tooltip"
+                      />
+                    </div>
+                  </div>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display: none;"
+    >
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            Option 1
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            Option 2
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          >
+            Option 3
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

--- a/components/menu/tests/snapshots/demo.test.tsx.snap
+++ b/components/menu/tests/snapshots/demo.test.tsx.snap
@ -422,6 +422,191 @@ exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
      style="display:none"
    />
  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
+      data-menu-list="true"
+      role="menu"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-item ant-menu-item-selected"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          aria-label="pie-chart"
+          class="anticon anticon-pie-chart ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="pie-chart"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 1
+        </span>
+      </li>
+      <li
+        class="ant-menu-item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          aria-label="desktop"
+          class="anticon anticon-desktop ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="desktop"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 2
+        </span>
+      </li>
+      <li
+        class="ant-menu-item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          aria-label="container"
+          class="anticon anticon-container ant-menu-item-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="container"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span
+          class="ant-menu-title-content"
+        >
+          Option 3
+        </span>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
+        role="none"
+      >
+        <div
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+      </li>
+      <li
+        class="ant-menu-submenu ant-menu-submenu-vertical"
+        role="none"
+      >
+        <div
+          aria-expanded="false"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            aria-label="appstore"
+            class="anticon anticon-appstore ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="appstore"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation Two
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display:none"
+    />
+  </div>
 </div>
 `;

--- a/components/menu/demo/component-token.tsx
+++ b/components/menu/demo/component-token.tsx
@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import {
  AppstoreOutlined,
  ContainerOutlined,
@ -6,7 +7,6 @@ import {
  PieChartOutlined,
  SettingOutlined,
 } from '@ant-design/icons';
-import React, { useState } from 'react';
 import type { MenuProps } from 'antd';
 import { ConfigProvider, Menu, Space } from 'antd';

@ -120,6 +120,7 @@ const App: React.FC = () => {
          components: {
            Menu: {
              horizontalItemBorderRadius: 6,
+              popupBg: 'red',
              horizontalItemHoverBg: '#f5f5f5',
            },
          },
@ -136,6 +137,7 @@ const App: React.FC = () => {
              darkSubMenuItemBg: '#faad14',
              darkItemSelectedColor: '#ffccc7',
              darkItemSelectedBg: '#52c41a',
+              darkPopupBg: 'red',
            },
          },
        }}
@ -151,6 +153,24 @@ const App: React.FC = () => {
          }}
        />
      </ConfigProvider>
+      <ConfigProvider
+        theme={{
+          components: {
+            Menu: {
+              darkPopupBg: 'red',
+            },
+          },
+        }}
+      >
+        <Menu
+          inlineCollapsed
+          defaultSelectedKeys={['1']}
+          defaultOpenKeys={['sub1']}
+          mode="inline"
+          theme="dark"
+          items={items2}
+        />
+      </ConfigProvider>
    </Space>
  );
 };
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@ -1,6 +1,9 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
-import { TinyColor } from '@ctrl/tinycolor';
 import type { CSSProperties } from 'react';
+import { unit } from '@ant-design/cssinjs';
+import type { CSSObject } from '@ant-design/cssinjs';
+import { TinyColor } from '@ctrl/tinycolor';
+import type { CssUtil } from 'antd-style';
+
 import { clearFix, resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
 import type {
@ -14,7 +17,6 @@ import getHorizontalStyle from './horizontal';
 import getRTLStyle from './rtl';
 import getThemeStyle from './theme';
 import getVerticalStyle from './vertical';
-import type { CssUtil } from 'antd-style';

 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@ -293,6 +295,12 @@ export interface ComponentToken {
  collapsedIconSize: number;

  // Dark
+  /**
+   * @desc 暗色模式下的浮层菜单的背景颜色
+   * @descEN The background color of the overlay menu in dark mode.
+   */
+  darkPopupBg: string;
+
  /**
   * @desc 暗色模式下的菜单项文字颜色
   * @descEN Color of menu item text in dark mode
@ -915,6 +923,7 @@ export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
    darkItemColor: colorTextDark,
    darkDangerItemColor: colorError,
    darkItemBg: '#001529',
+    darkPopupBg: '#001529',
    darkSubMenuItemBg: '#000c17',
    darkItemSelectedColor: colorTextLightSolid,
    darkItemSelectedBg: colorPrimary,
@ -949,6 +958,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        darkItemColor,
        darkDangerItemColor,
        darkItemBg,
+        darkPopupBg,
        darkSubMenuItemBg,
        darkItemSelectedColor,
        darkItemSelectedBg,
@ -984,7 +994,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
        groupTitleColor: darkGroupTitleColor,
        itemSelectedColor: darkItemSelectedColor,
        itemBg: darkItemBg,
-        popupBg: darkItemBg,
+        popupBg: darkPopupBg || darkItemBg,
        subMenuItemBg: darkSubMenuItemBg,
        itemActiveBg: 'transparent',
        itemSelectedBg: darkItemSelectedBg,
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@ -1,4 +1,5 @@
-import { unit, type CSSInterpolation } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
+import type { CSSInterpolation } from '@ant-design/cssinjs';

 import type { MenuToken } from '.';
 import { genFocusOutline } from '../../style';
@ -159,6 +160,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
        backgroundColor: menuSubMenuBg,
      },

+      [`&${componentCls}-submenu-popup > ${componentCls}`]: {
+        backgroundColor: popupBg,
+      },
+
      [`&${componentCls}-popup > ${componentCls}`]: {
        backgroundColor: popupBg,
      },
--- a/components/qr-code/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/qr-code/tests/snapshots/demo-extend.test.ts.snap
@ -32,9 +32,8 @@ Array [
            style="width: 160px; height: 160px; background-color: transparent;"
          >
            <canvas
-              height="134"
-              style="height: 134px; width: 134px;"
-              width="134"
+              height="160"
+              width="160"
            />
          </div>
        </div>
@ -58,9 +57,8 @@ exports[`renders components/qr-code/demo/base.tsx extend context correctly 1`] =
      style="width: 160px; height: 160px; background-color: transparent;"
    >
      <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -92,9 +90,8 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
      style="width: 160px; height: 160px; background-color: transparent;"
    >
      <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -106,9 +103,8 @@ exports[`renders components/qr-code/demo/customColor.tsx extend context correctl
      style="width: 160px; height: 160px; background-color: rgb(245, 245, 245);"
    >
      <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -194,9 +190,8 @@ Array [
    style="width: 160px; height: 160px; background-color: transparent;"
  >
    <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
    />
    <img
      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@ -217,9 +212,8 @@ exports[`renders components/qr-code/demo/download.tsx extend context correctly 1
    style="margin-bottom: 16px; width: 160px; height: 160px; background-color: rgb(255, 255, 255);"
  >
    <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
    />
  </div>
  <button
@ -242,9 +236,8 @@ Array [
    style="margin-bottom: 16px; width: 160px; height: 160px; background-color: transparent;"
  >
    <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
    />
  </div>,
  <div
@ -323,9 +316,8 @@ exports[`renders components/qr-code/demo/icon.tsx extend context correctly 1`] =
  style="width: 160px; height: 160px; background-color: transparent;"
 >
  <canvas
-    height="134"
-    style="height: 134px; width: 134px;"
-    width="134"
+    height="160"
+    width="160"
  />
  <img
    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@ -375,9 +367,8 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
        </div>
      </div>
      <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -429,9 +420,8 @@ exports[`renders components/qr-code/demo/status.tsx extend context correctly 1`]
        </button>
      </div>
      <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -452,9 +442,8 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
      style="width: 160px; height: 160px; background-color: transparent;"
    >
      <canvas
-        height="134"
-        style="height: 134px; width: 134px;"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -466,9 +455,9 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] =
      style="width: 160px; height: 160px; background-color: transparent;"
    >
      <svg
-        height="134"
+        height="160"
        viewBox="0 0 25 25"
-        width="134"
+        width="160"
      >
        <path
          d="M0,0 h25v25H0z"
--- a/components/qr-code/tests/snapshots/demo.test.ts.snap
+++ b/components/qr-code/tests/snapshots/demo.test.ts.snap
@ -21,9 +21,8 @@ exports[`renders components/qr-code/demo/base.tsx correctly 1`] = `
      style="width:160px;height:160px;background-color:transparent"
    >
      <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -53,9 +52,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
      style="width:160px;height:160px;background-color:transparent"
    >
      <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -67,9 +65,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = `
      style="width:160px;height:160px;background-color:#f5f5f5"
    >
      <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -153,9 +150,8 @@ Array [
    style="width:160px;height:160px;background-color:transparent"
  >
    <canvas
-      height="134"
-      style="height:134px;width:134px"
-      width="134"
+      height="160"
+      width="160"
    />
    <img
      src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@ -174,9 +170,8 @@ exports[`renders components/qr-code/demo/download.tsx correctly 1`] = `
    style="margin-bottom:16px;width:160px;height:160px;background-color:#fff"
  >
    <canvas
-      height="134"
-      style="height:134px;width:134px"
-      width="134"
+      height="160"
+      width="160"
    />
  </div>
  <button
@ -197,9 +192,8 @@ Array [
    style="margin-bottom:16px;width:160px;height:160px;background-color:transparent"
  >
    <canvas
-      height="134"
-      style="height:134px;width:134px"
-      width="134"
+      height="160"
+      width="160"
    />
  </div>,
  <div
@ -276,9 +270,8 @@ exports[`renders components/qr-code/demo/icon.tsx correctly 1`] = `
  style="width:160px;height:160px;background-color:transparent"
 >
  <canvas
-    height="134"
-    style="height:134px;width:134px"
-    width="134"
+    height="160"
+    width="160"
  />
  <img
    src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
@ -326,9 +319,8 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
        </div>
      </div>
      <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -380,9 +372,8 @@ exports[`renders components/qr-code/demo/status.tsx correctly 1`] = `
        </button>
      </div>
      <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -401,9 +392,8 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
      style="width:160px;height:160px;background-color:transparent"
    >
      <canvas
-        height="134"
-        style="height:134px;width:134px"
-        width="134"
+        height="160"
+        width="160"
      />
    </div>
  </div>
@ -415,9 +405,9 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = `
      style="width:160px;height:160px;background-color:transparent"
    >
      <svg
-        height="134"
+        height="160"
        viewBox="0 0 25 25"
-        width="134"
+        width="160"
      >
        <path
          d="M0,0 h25v25H0z"
--- a/components/qr-code/tests/snapshots/index.test.tsx.snap
+++ b/components/qr-code/tests/snapshots/index.test.tsx.snap
@ -9,9 +9,8 @@ exports[`QRCode test should correct render 1`] = `
    style="width: 160px; height: 160px; background-color: transparent;"
  >
    <canvas
-      height="134"
-      style="height: 134px; width: 134px;"
-      width="134"
+      height="160"
+      width="160"
    />
  </div>
 </div>
--- a/components/qr-code/tests/index.test.tsx
+++ b/components/qr-code/tests/index.test.tsx
@ -39,9 +39,7 @@ describe('QRCode test', () => {

  it('support custom size', () => {
    const { container } = render(<QRCode value="test" size={100} />);
-    const wrapper = container.querySelector<HTMLDivElement>('.ant-qrcode');
-    expect(wrapper?.style?.width).toBe('100px');
-    expect(wrapper?.style?.height).toBe('100px');
+    expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px');
  });

  it('support refresh', () => {
--- a/components/qr-code/index.en-US.md
+++ b/components/qr-code/index.en-US.md
@ -43,7 +43,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | value | scanned text | string | - |
 | type | render type | `canvas \| svg ` | `canvas` | 5.6.0 |
 | icon | include image url (only image link are supported) | string | - |
-| size | QRCode size | number | 128 |
+| size | QRCode size | number | 160 |
 | iconSize | include image size | number | 32 |
 | color | QRCode Color | string | `#000` |
 | bgColor | QRCode Background Color | string | `transparent` | 5.5.0 |
--- a/components/qr-code/index.tsx
+++ b/components/qr-code/index.tsx
@ -47,10 +47,11 @@ const QRCode: React.FC<QRCodeProps> = (props) => {

  const qrCodeProps = {
    value,
-    size: size - (token.paddingSM + token.lineWidth) * 2,
+    size,
    level: errorLevel,
    bgColor,
    fgColor: color,
+    style: { width: undefined, height: undefined },
    imageSettings: icon ? imageSettings : undefined,
  };

--- a/components/qr-code/style/index.ts
+++ b/components/qr-code/style/index.ts
@ -22,9 +22,8 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
      borderRadius: token.borderRadiusLG,
      border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      position: 'relative',
-      width: '100%',
-      height: '100%',
      overflow: 'hidden',
+
      [`& > ${componentCls}-mask`]: {
        position: 'absolute',
        insetBlockStart: 0,
@ -44,6 +43,13 @@ const genQRCodeStyle: GenerateStyle<QRCodeToken> = (token) => {
          color: token.QRCodeExpiredTextColor,
        },
      },
+
+      '> canvas': {
+        alignSelf: 'stretch',
+        flex: 'auto',
+        minWidth: 0,
+      },
+
      '&-icon': {
        marginBlockEnd: token.marginXS,
        fontSize: token.controlHeight,
--- a/components/radio/tests/radio.test.tsx
+++ b/components/radio/tests/radio.test.tsx
@ -54,4 +54,8 @@ describe('Radio', () => {
    );
    expect(getByRole('radio')).not.toBeDisabled();
  });
+
+  it('have static property for type detecting', () => {
+    expect(Radio.__ANT_RADIO).toBeTruthy();
+  });
 });
--- a/components/switch/tests/index.test.tsx
+++ b/components/switch/tests/index.test.tsx
@ -63,4 +63,8 @@ describe('Switch', () => {
    // uncontrolled component, so false after click
    expect(getByRole('switch')).not.toBeChecked();
  });
+
+  it('have static property for type detecting', () => {
+    expect(Switch.__ANT_SWITCH).toBeTruthy();
+  });
 });
--- a/docs/react/server-side-rendering.en-US.md
+++ b/docs/react/server-side-rendering.en-US.md
@ -16,13 +16,14 @@ There are two options for server-side rendering styles, each with advantages and
 Use `@ant-design/cssinjs` to extract style:

 ```tsx
+import React from 'react';
 import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/es/Cache';
 import { renderToString } from 'react-dom/server';

-export default () => {
+const App = () => {
  // SSR Render
-  const cache = createCache();
-
+  const cache = React.useMemo<Entity>(() => createCache(), []);
  const html = renderToString(
    <StyleProvider cache={cache}>
      <MyApp />
@ -34,17 +35,19 @@ export default () => {

  // Mix with style
  return `
-<!DOCTYPE html>
-<html>
-  <head>
-    ${styleText}
-  </head>
-  <body>
-    <div id="root">${html}</div>
-  </body>
-</html>
-`;
+    <!DOCTYPE html>
+    <html>
+      <head>
+        ${styleText}
+      </head>
+      <body>
+        <div id="root">${html}</div>
+      </body>
+    </html>
+  `;
 };
+
+export default App;
 ```

 ## Whole Export
@ -89,8 +92,8 @@ If you want to use mixed themes or custom themes, you can use the following scri

 ```tsx
 import fs from 'fs';
-import { extractStyle } from '@ant-design/static-style-extract';
 import React from 'react';
+import { extractStyle } from '@ant-design/static-style-extract';
 import { ConfigProvider } from 'antd';

 const outputPath = './public/antd.min.css';
@ -155,6 +158,7 @@ Then, you just need to import this file into the `pages/_app.tsx` file:
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
 import type { AppProps } from 'next/app';
+
 import '../public/antd.min.css'; // add this line
 import '../styles/globals.css';

@ -237,8 +241,8 @@ More about static-style-extract, see [static-style-extract](https://github.com/a
 import { createHash } from 'crypto';
 import fs from 'fs';
 import path from 'path';
-import type Entity from '@ant-design/cssinjs/lib/Cache';
 import { extractStyle } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/lib/Cache';

 export type DoExtraStyleOptions = {
  cache: Entity;
@ -280,9 +284,10 @@ Export on demand using the above tools in `_document.tsx`

 ```tsx
 // _document.tsx
-import { StyleProvider, createCache } from '@ant-design/cssinjs';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import type { DocumentContext } from 'next/document';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+
 import { doExtraStyle } from '../scripts/genAntdCss';

 export default class MyDocument extends Document {
--- a/docs/react/server-side-rendering.zh-CN.md
+++ b/docs/react/server-side-rendering.zh-CN.md
@ -16,13 +16,14 @@ tag: New
 使用 `@ant-design/cssinjs` 将所需样式抽离：

 ```tsx
+import React from 'react';
 import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/es/Cache';
 import { renderToString } from 'react-dom/server';

-export default () => {
+const App = () => {
  // SSR Render
-  const cache = createCache();
-
+  const cache = React.useMemo<Entity>(() => createCache(), []);
  const html = renderToString(
    <StyleProvider cache={cache}>
      <MyApp />
@ -34,17 +35,19 @@ export default () => {

  // Mix with style
  return `
-<!DOCTYPE html>
-<html>
-  <head>
-    ${styleText}
-  </head>
-  <body>
-    <div id="root">${html}</div>
-  </body>
-</html>
-`;
+    <!DOCTYPE html>
+    <html>
+      <head>
+        ${styleText}
+      </head>
+      <body>
+        <div id="root">${html}</div>
+      </body>
+    </html>
+  `;
 };
+
+export default App;
 ```

 ## 整体导出
@ -89,8 +92,8 @@ fs.writeFileSync(outputPath, css);

 ```tsx
 import fs from 'fs';
-import { extractStyle } from '@ant-design/static-style-extract';
 import React from 'react';
+import { extractStyle } from '@ant-design/static-style-extract';
 import { ConfigProvider } from 'antd';

 const outputPath = './public/antd.min.css';
@ -155,6 +158,7 @@ fs.writeFileSync(outputPath, css);
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
 import type { AppProps } from 'next/app';
+
 import '../public/antd.min.css'; // 添加这行
 import '../styles/globals.css';

@ -237,8 +241,8 @@ const cssText = extractStyle((node) => (
 import { createHash } from 'crypto';
 import fs from 'fs';
 import path from 'path';
-import type Entity from '@ant-design/cssinjs/lib/Cache';
 import { extractStyle } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/lib/Cache';

 export type DoExtraStyleOptions = {
  cache: Entity;
@ -280,9 +284,10 @@ export function doExtraStyle({

 ```tsx
 // _document.tsx
-import { StyleProvider, createCache } from '@ant-design/cssinjs';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import type { DocumentContext } from 'next/document';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
+
 import { doExtraStyle } from '../scripts/genAntdCss';

 export default class MyDocument extends Document {
--- a/docs/react/use-with-next.en-US.md
+++ b/docs/react/use-with-next.en-US.md
@ -67,16 +67,20 @@ If you are using the App Router in Next.js and using antd as your component libr

 import React from 'react';
 import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
-// if you are using Next.js 14, use below import instead. More info: https://github.com/ant-design/ant-design/issues/45567
-// import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs/lib';
 import type Entity from '@ant-design/cssinjs/es/Cache';
 import { useServerInsertedHTML } from 'next/navigation';

 const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
  const cache = React.useMemo<Entity>(() => createCache(), []);
-  useServerInsertedHTML(() => (
-    <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
-  ));
+  const isServerInserted = React.useRef<boolean>(false);
+  useServerInsertedHTML(() => {
+    // avoid duplicate css insert
+    if (isServerInserted.current) {
+      return;
+    }
+    isServerInserted.current = true;
+    return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
+  });
  return <StyleProvider cache={cache}>{children}</StyleProvider>;
 };

--- a/docs/react/use-with-next.zh-CN.md
+++ b/docs/react/use-with-next.zh-CN.md
@ -67,16 +67,20 @@ export default Home;

 import React from 'react';
 import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
-// 如果您使用的是 Next.js 14，请改用下面的导入。更多信息： https://github.com/ant-design/ant-design/issues/45567
-// import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs/lib';
 import type Entity from '@ant-design/cssinjs/es/Cache';
 import { useServerInsertedHTML } from 'next/navigation';

 const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
  const cache = React.useMemo<Entity>(() => createCache(), []);
-  useServerInsertedHTML(() => (
-    <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />
-  ));
+  const isServerInserted = React.useRef<boolean>(false);
+  useServerInsertedHTML(() => {
+    // 避免 css 重复插入
+    if (isServerInserted.current) {
+      return;
+    }
+    isServerInserted.current = true;
+    return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
+  });
  return <StyleProvider cache={cache}>{children}</StyleProvider>;
 };

--- a/package.json
+++ b/package.json
@ -121,7 +121,7 @@
    "@rc-component/color-picker": "~1.4.1",
    "@rc-component/mutate-observer": "^1.1.0",
    "@rc-component/tour": "~1.11.0",
-    "@rc-component/trigger": "^1.18.1",
+    "@rc-component/trigger": "^1.18.2",
    "classnames": "^2.3.2",
    "copy-to-clipboard": "^3.3.3",
    "dayjs": "^1.11.1",
@ -224,7 +224,7 @@
    "dumi-plugin-color-chunk": "^1.0.2",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "esbuild-loader": "^4.0.0",
-    "eslint": "^8.40.0",
+    "eslint": "^8.53.0",
    "eslint-config-airbnb": "^19.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.5.2",
@ -269,9 +269,9 @@
    "node-notifier": "^10.0.1",
    "nprogress": "^0.2.0",
    "open": "^9.0.0",
-    "prettier": "^3.0.0",
-    "prettier-plugin-jsdoc": "^1.0.1",
-    "pretty-format": "^29.0.0",
+    "prettier": "^3.1.0",
+    "prettier-plugin-jsdoc": "^1.1.1",
+    "pretty-format": "^29.7.0",
    "prismjs": "^1.29.0",
    "progress": "^2.0.3",
    "puppeteer": "^21.1.1",
@ -306,7 +306,7 @@
    "stylelint-prettier": "^4.0.0",
    "sylvanas": "^0.6.1",
    "terser": "^5.16.1",
-    "tsx": "^3.12.8",
+    "tsx": "^4.1.0",
    "typedoc": "^0.25.0",
    "typescript": "~5.2.2",
    "vanilla-jsoneditor": "^0.18.0",