diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx
index c39e2fc501..e091eb3cc4 100644
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@@ -24,7 +24,6 @@ export default () => {
           display: inline-block;
           width: 100%;
           margin: 0 0 16px;
-          overflow: hidden;
           border: 1px solid ${token.colorSplit};
           border-radius: ${token.borderRadius}px;
           transition: all 0.2s;
@@ -40,6 +39,7 @@ export default () => {
           &,
           .code-box-demo {
             background-color: ${token.colorBgContainer};
+            border-radius: ${token.borderRadius}px;
 
             &[data-compact] {
               padding: 0;
diff --git a/.jest.js b/.jest.js
index 5938510af2..a4006085a5 100644
--- a/.jest.js
+++ b/.jest.js
@@ -4,6 +4,7 @@ const compileModules = [
   'react-dnd-html5-backend',
   '@react-dnd',
   'dnd-core',
+  'react-sticky-box',
   'tween-one',
   '@babel',
   '@ant-design',
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index acddcca47a..ad4dfe4c63 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -934,140 +934,139 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.tsx extend context co
 `;
 
 exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correctly 1`] = `
-<div>
+<div
+  class="ant-tabs ant-tabs-top"
+>
   <div
-    class="ant-tabs ant-tabs-top"
+    style="z-index:1"
   >
-    <div>
-      <div />
+    <div
+      class="ant-tabs-nav"
+      role="tablist"
+      style="background:#ffffff"
+    >
       <div
-        class="ant-tabs-nav"
-        role="tablist"
-        style="z-index:1"
+        class="ant-tabs-nav-wrap"
       >
         <div
-          class="ant-tabs-nav-wrap"
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
           <div
-            class="ant-tabs-nav-list"
-            style="transform:translate(0px, 0px)"
+            class="ant-tabs-tab ant-tabs-tab-active"
+            data-node-key="1"
           >
             <div
-              class="ant-tabs-tab ant-tabs-tab-active"
-              data-node-key="1"
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
             >
-              <div
-                aria-selected="true"
-                class="ant-tabs-tab-btn"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 1
-              </div>
+              Tab 1
             </div>
-            <div
-              class="ant-tabs-tab"
-              data-node-key="2"
-            >
-              <div
-                aria-selected="false"
-                class="ant-tabs-tab-btn"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 2
-              </div>
-            </div>
-            <div
-              class="ant-tabs-tab"
-              data-node-key="3"
-            >
-              <div
-                aria-selected="false"
-                class="ant-tabs-tab-btn"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 3
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-            />
           </div>
-        </div>
-        <div
-          class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
-          style="z-index:1"
-        >
-          <button
-            aria-controls="null-more-popup"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-hidden="true"
-            class="ant-tabs-nav-more"
-            id="null-more"
-            style="visibility:hidden;order:1"
-            tabindex="-1"
-            type="button"
+          <div
+            class="ant-tabs-tab"
+            data-node-key="2"
           >
-            <span
-              aria-label="ellipsis"
-              class="anticon anticon-ellipsis"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="ellipsis"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-                />
-              </svg>
-            </span>
-          </button>
-          <div>
             <div
-              class="ant-tabs-dropdown"
-              style="opacity:0"
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
             >
-              <ul
-                aria-label="expanded dropdown"
-                class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
-                data-menu-list="true"
-                id="null-more-popup"
-                role="listbox"
-                tabindex="-1"
-              />
-              <div
-                aria-hidden="true"
-                style="display:none"
-              />
+              Tab 2
             </div>
           </div>
+          <div
+            class="ant-tabs-tab"
+            data-node-key="3"
+          >
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Tab 3
+            </div>
+          </div>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+        style="background:#ffffff"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+        <div>
+          <div
+            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="null-more-popup"
+              role="listbox"
+              tabindex="-1"
+            />
+            <div
+              aria-hidden="true"
+              style="display:none"
+            />
+          </div>
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
     <div
-      class="ant-tabs-content-holder"
+      class="ant-tabs-content ant-tabs-content-top"
     >
       <div
-        class="ant-tabs-content ant-tabs-content-top"
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        style="height:200px"
+        tabindex="0"
       >
-        <div
-          aria-hidden="false"
-          class="ant-tabs-tabpane ant-tabs-tabpane-active"
-          role="tabpanel"
-          style="height:200px"
-          tabindex="0"
-        >
-          Content of Tab Pane 1
-        </div>
+        Content of Tab Pane 1
       </div>
     </div>
   </div>
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
index c0192418aa..47547635bc 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -820,122 +820,121 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.tsx correctly 1`] = `
 `;
 
 exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
-<div>
+<div
+  class="ant-tabs ant-tabs-top"
+>
   <div
-    class="ant-tabs ant-tabs-top"
+    style="z-index:1"
   >
-    <div>
-      <div />
-      <div
-        class="ant-tabs-nav"
-        role="tablist"
-        style="z-index:1"
-      >
-        <div
-          class="ant-tabs-nav-wrap"
-        >
-          <div
-            class="ant-tabs-nav-list"
-            style="transform:translate(0px, 0px)"
-          >
-            <div
-              class="ant-tabs-tab ant-tabs-tab-active"
-              data-node-key="1"
-            >
-              <div
-                aria-selected="true"
-                class="ant-tabs-tab-btn"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 1
-              </div>
-            </div>
-            <div
-              class="ant-tabs-tab"
-              data-node-key="2"
-            >
-              <div
-                aria-selected="false"
-                class="ant-tabs-tab-btn"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 2
-              </div>
-            </div>
-            <div
-              class="ant-tabs-tab"
-              data-node-key="3"
-            >
-              <div
-                aria-selected="false"
-                class="ant-tabs-tab-btn"
-                role="tab"
-                tabindex="0"
-              >
-                Tab 3
-              </div>
-            </div>
-            <div
-              class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
-          style="z-index:1"
-        >
-          <button
-            aria-controls="null-more-popup"
-            aria-expanded="false"
-            aria-haspopup="listbox"
-            aria-hidden="true"
-            class="ant-tabs-nav-more"
-            id="null-more"
-            style="visibility:hidden;order:1"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              aria-label="ellipsis"
-              class="anticon anticon-ellipsis"
-              role="img"
-            >
-              <svg
-                aria-hidden="true"
-                data-icon="ellipsis"
-                fill="currentColor"
-                focusable="false"
-                height="1em"
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
     <div
-      class="ant-tabs-content-holder"
+      class="ant-tabs-nav"
+      role="tablist"
+      style="background:#ffffff"
     >
       <div
-        class="ant-tabs-content ant-tabs-content-top"
+        class="ant-tabs-nav-wrap"
       >
         <div
-          aria-hidden="false"
-          class="ant-tabs-tabpane ant-tabs-tabpane-active"
-          role="tabpanel"
-          style="height:200px"
-          tabindex="0"
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
         >
-          Content of Tab Pane 1
+          <div
+            class="ant-tabs-tab ant-tabs-tab-active"
+            data-node-key="1"
+          >
+            <div
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Tab 1
+            </div>
+          </div>
+          <div
+            class="ant-tabs-tab"
+            data-node-key="2"
+          >
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Tab 2
+            </div>
+          </div>
+          <div
+            class="ant-tabs-tab"
+            data-node-key="3"
+          >
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Tab 3
+            </div>
+          </div>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
         </div>
       </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+        style="background:#ffffff"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
+    <div
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        style="height:200px"
+        tabindex="0"
+      >
+        Content of Tab Pane 1
+      </div>
     </div>
   </div>
 </div>
diff --git a/components/tabs/demo/custom-tab-bar.md b/components/tabs/demo/custom-tab-bar.md
index 75e1e04a51..a967b73eac 100644
--- a/components/tabs/demo/custom-tab-bar.md
+++ b/components/tabs/demo/custom-tab-bar.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-使用 react-sticky 组件实现吸顶效果。
+使用 [react-sticky-box](https://www.npmjs.com/package/react-stickynode) 和 `renderTabBar` 实现吸顶效果。
 
 ## en-US
 
-Use react-sticky.
+Use [react-sticky-box](https://www.npmjs.com/package/react-stickynode) and `renderTabBar`.
diff --git a/components/tabs/demo/custom-tab-bar.tsx b/components/tabs/demo/custom-tab-bar.tsx
index 7574e57bf6..dcff7697aa 100644
--- a/components/tabs/demo/custom-tab-bar.tsx
+++ b/components/tabs/demo/custom-tab-bar.tsx
@@ -1,13 +1,7 @@
 import React from 'react';
 import type { TabsProps } from 'antd';
-import { Tabs } from 'antd';
-import { Sticky, StickyContainer } from 'react-sticky';
-
-const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
-  <Sticky bottomOffset={80}>
-    {({ style }) => <DefaultTabBar {...props} style={{ zIndex: 1, ...style }} />}
-  </Sticky>
-);
+import { Tabs, theme } from 'antd';
+import StickyBox from 'react-sticky-box';
 
 const items = new Array(3).fill(null).map((_, i) => {
   const id = String(i + 1);
@@ -19,10 +13,16 @@ const items = new Array(3).fill(null).map((_, i) => {
   };
 });
 
-const App: React.FC = () => (
-  <StickyContainer>
-    <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />
-  </StickyContainer>
-);
+const App: React.FC = () => {
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+  const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
+    <StickyBox offsetTop={0} offsetBottom={20} style={{ zIndex: 1 }}>
+      <DefaultTabBar {...props} style={{ background: colorBgContainer }} />
+    </StickyBox>
+  );
+  return <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />;
+};
 
 export default App;
diff --git a/package.json b/package.json
index 0bc13685b9..c1acb3b7f6 100644
--- a/package.json
+++ b/package.json
@@ -184,7 +184,6 @@
     "@types/react-dom": "^18.0.0",
     "@types/react-highlight-words": "^0.16.4",
     "@types/react-resizable": "^3.0.0",
-    "@types/react-sticky": "^6.0.4",
     "@types/react-window": "^1.8.2",
     "@types/throttle-debounce": "^5.0.0",
     "@types/warning": "^3.0.0",
@@ -262,7 +261,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-resizable": "^3.0.1",
     "react-router-dom": "^6.0.2",
-    "react-sticky": "^6.0.3",
+    "react-sticky-box": "^1.0.2",
     "react-window": "^1.8.5",
     "remark": "^14.0.1",
     "remark-cli": "^11.0.0",