diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 3b32479c49..7230e9aaec 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -243,9 +243,9 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
     updatePosition();
   }, [target, offsetTop, offsetBottom]);
 
-  const [wrapCSSVar, hashId] = useStyle(affixPrefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(affixPrefixCls);
 
-  const rootCls = classNames(rootClassName, hashId, affixPrefixCls);
+  const rootCls = classNames(rootClassName, hashId, affixPrefixCls, cssVarCls);
 
   const mergedCls = classNames({ [rootCls]: affixStyle });
 
diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
index e9a8c08854..00a7a2e4a2 100644
--- a/components/alert/Alert.tsx
+++ b/components/alert/Alert.tsx
@@ -127,7 +127,7 @@ const Alert: React.FC<AlertProps> = (props) => {
   const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
     setClosed(true);
@@ -169,6 +169,7 @@ const Alert: React.FC<AlertProps> = (props) => {
     alert?.className,
     className,
     rootClassName,
+    cssVarCls,
     hashId,
   );
 
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 304d48c7b8..028713eabd 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -153,7 +153,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
   const prefixCls = getPrefixCls('anchor', customPrefixCls);
 
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
 
@@ -273,6 +273,7 @@ const Anchor: React.FC<AnchorProps> = (props) => {
 
   const wrapperClass = classNames(
     hashId,
+    cssVarCls,
     rootCls,
     rootClassName,
     `${prefixCls}-wrapper`,
diff --git a/components/app/index.tsx b/components/app/index.tsx
index 352f397a1b..dafb414f11 100644
--- a/components/app/index.tsx
+++ b/components/app/index.tsx
@@ -36,8 +36,8 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
   } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const customClassName = classNames(hashId, prefixCls, className, rootClassName);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+  const customClassName = classNames(hashId, prefixCls, className, rootClassName, cssVarCls);
 
   const appConfig = useContext<AppConfig>(AppConfigContext);
 
diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
index e245dbb32c..0a397aaa72 100644
--- a/components/avatar/avatar.tsx
+++ b/components/avatar/avatar.tsx
@@ -145,8 +145,8 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
   }
 
   const prefixCls = getPrefixCls('avatar', customizePrefixCls);
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const sizeCls = classNames({
     [`${prefixCls}-lg`]: size === 'large',
@@ -167,6 +167,7 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
       [`${prefixCls}-icon`]: !!icon,
     },
     cssVarCls,
+    rootCls,
     className,
     rootClassName,
     hashId,
diff --git a/components/avatar/group.tsx b/components/avatar/group.tsx
index 302b179b83..964a5a07f7 100644
--- a/components/avatar/group.tsx
+++ b/components/avatar/group.tsx
@@ -61,8 +61,8 @@ const Group: React.FC<GroupProps> = (props) => {
 
   const prefixCls = getPrefixCls('avatar', customizePrefixCls);
   const groupPrefixCls = `${prefixCls}-group`;
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const cls = classNames(
     groupPrefixCls,
@@ -70,6 +70,7 @@ const Group: React.FC<GroupProps> = (props) => {
       [`${groupPrefixCls}-rtl`]: direction === 'rtl',
     },
     cssVarCls,
+    rootCls,
     className,
     rootClassName,
     hashId,
diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
index 301108109e..ef1f1f9c77 100644
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -77,10 +77,11 @@ const BackTop: React.FC<BackTopProps> = (props) => {
 
   const rootPrefixCls = getPrefixCls();
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const classString = classNames(
     hashId,
+    cssVarCls,
     prefixCls,
     {
       [`${prefixCls}-rtl`]: direction === 'rtl',
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
index b12c349d7f..4bd8ef5ff9 100644
--- a/components/badge/Ribbon.tsx
+++ b/components/badge/Ribbon.tsx
@@ -34,7 +34,8 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const wrapperCls = `${prefixCls}-wrapper`;
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, wrapperCls);
 
   const colorInPreset = isPresetColor(color, false);
   const ribbonCls = classNames(
@@ -54,7 +55,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
     cornerColorStyle.color = color;
   }
   return wrapCSSVar(
-    <div className={classNames(`${prefixCls}-wrapper`, rootClassName, hashId)}>
+    <div className={classNames(wrapperCls, rootClassName, hashId, cssVarCls)}>
       {children}
       <div className={classNames(ribbonCls, hashId)} style={{ ...colorStyle, ...style }}>
         <span className={`${prefixCls}-text`}>{text}</span>
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index dc9fab7034..375e5fd7db 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -76,7 +76,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
   const { getPrefixCls, direction, badge } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('badge', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   // ================================ Misc ================================
   const numberedDisplayCount = (
@@ -183,6 +183,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
     badge?.classNames?.root,
     classNames?.root,
     hashId,
+    cssVarCls,
   );
 
   // <Badge status="success" />
diff --git a/components/badge/style/ribbon.ts b/components/badge/style/ribbon.ts
index 84ede38889..cc5f65d247 100644
--- a/components/badge/style/ribbon.ts
+++ b/components/badge/style/ribbon.ts
@@ -1,9 +1,9 @@
 import { unit } from '@ant-design/cssinjs';
 
-import { prepareComponentToken, prepareToken, type BadgeToken } from '.';
+import { type BadgeToken, prepareComponentToken, prepareToken } from '.';
 import { resetComponent } from '../../style';
 import type { GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, genPresetColor } from '../../theme/internal';
+import { genPresetColor, genStyleHooks } from '../../theme/internal';
 
 // ============================== Ribbon ==============================
 const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
@@ -75,7 +75,7 @@ const genRibbonStyle: GenerateStyle<BadgeToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   ['Badge', 'Ribbon'],
   (token) => {
     const badgeToken = prepareToken(token);
diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index d30e6cf4b9..d92bbbaa27 100755
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -95,7 +95,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
   let crumbs: React.ReactNode;
 
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const mergedItems = useItems(items, legacyRoutes);
 
@@ -213,6 +213,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = { ...breadcrumb?.style, ...style };
diff --git a/components/button/button.tsx b/components/button/button.tsx
index de6cf5b9fc..bafae0758d 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -118,7 +118,7 @@ const InternalButton: React.ForwardRefRenderFunction<
   const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const disabled = useContext(DisabledContext);
   const mergedDisabled = customDisabled ?? disabled;
@@ -215,6 +215,7 @@ const InternalButton: React.ForwardRefRenderFunction<
   const classes = classNames(
     prefixCls,
     hashId,
+    cssVarCls,
     {
       [`${prefixCls}-${shape}`]: shape !== 'default' && shape,
       [`${prefixCls}-${type}`]: type,
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index 4aaf34f7b3..0c5d95c7cf 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -119,7 +119,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const calendarPrefixCls = `${prefixCls}-calendar`;
 
-    const [wrapCSSVar, hashId] = useStyle(prefixCls, calendarPrefixCls);
+    const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, calendarPrefixCls);
 
     const today = generateConfig.getNow();
 
@@ -294,6 +294,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
           className,
           rootClassName,
           hashId,
+          cssVarCls,
         )}
         style={{ ...calendar?.style, ...style }}
       >
diff --git a/components/card/Card.tsx b/components/card/Card.tsx
index 0aa4b39abc..b7e0b89732 100644
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@@ -109,7 +109,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   }, [children]);
 
   const prefixCls = getPrefixCls('card', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const loadingBlock = (
     <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
@@ -177,6 +177,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = { ...card?.style, ...style };
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index f30d4f9c78..c963d66147 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -94,7 +94,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     typeof dots === 'boolean' ? false : dots?.className,
   );
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const className = classNames(
     prefixCls,
@@ -103,6 +103,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
       [`${prefixCls}-vertical`]: newProps.vertical,
     },
     hashId,
+    cssVarCls,
     rootClassName,
   );
 
diff --git a/components/cascader/Panel.tsx b/components/cascader/Panel.tsx
index 28a8f8dabf..6049c4c250 100644
--- a/components/cascader/Panel.tsx
+++ b/components/cascader/Panel.tsx
@@ -33,7 +33,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
   );
 
   const rootCls = useCSSVarCls(cascaderPrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(cascaderPrefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(cascaderPrefixCls, rootCls);
   usePanelStyle(cascaderPrefixCls);
 
   const isRtl = mergedDirection === 'rtl';
@@ -56,7 +56,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
       {...props}
       checkable={checkable}
       prefixCls={cascaderPrefixCls}
-      className={classNames(className, hashId, rootClassName, rootCls)}
+      className={classNames(className, hashId, rootClassName, cssVarCls, rootCls)}
       notFoundContent={mergedNotFoundContent}
       direction={mergedDirection}
       expandIcon={mergedExpandIcon}
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index f51e362497..d0eaf5d104 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -213,7 +213,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
   const rootPrefixCls = getPrefixCls();
 
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapSelectCSSVar, hashId] = useSelectStyle(prefixCls, rootCls);
+  const [wrapSelectCSSVar, hashId, cssVarCls] = useSelectStyle(prefixCls, rootCls);
   const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
   const [wrapCascaderCSSVar] = useStyle(cascaderPrefixCls, cascaderRootCls);
 
@@ -235,6 +235,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
     rootCls,
     cascaderRootCls,
     hashId,
+    cssVarCls,
   );
 
   // ==================== Search =====================
@@ -318,6 +319,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
         rootCls,
         cascaderRootCls,
         hashId,
+        cssVarCls,
       )}
       disabled={mergedDisabled}
       style={{ ...cascader?.style, ...style }}
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 7701a0f8b0..bab2c60b95 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -107,7 +107,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
 
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const checkboxProps: CheckboxProps = { ...restProps };
   if (checkboxGroup && !skipGroup) {
@@ -133,6 +133,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     checkbox?.className,
     className,
     rootClassName,
+    cssVarCls,
     rootCls,
     hashId,
   );
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index 2f3fa5d6ed..b47365b665 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -112,7 +112,7 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
   const groupPrefixCls = `${prefixCls}-group`;
 
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const domProps = omit(restProps, ['value', 'disabled']);
 
@@ -153,6 +153,7 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
     },
     className,
     rootClassName,
+    cssVarCls,
     rootCls,
     hashId,
   );
diff --git a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3be836d953..c54a484996 100644
--- a/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -165,6 +165,75 @@ Array [
 
 exports[`renders components/checkbox/demo/controller.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/checkbox/demo/custom-line-width.tsx extend context correctly 1`] = `
+Array [
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+]
+`;
+
+exports[`renders components/checkbox/demo/custom-line-width.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/checkbox/demo/debug-disable-popover.tsx extend context correctly 1`] = `
 <div
   style="padding: 56px;"
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
index ce3480f71c..22e16b0c98 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
@@ -159,6 +159,73 @@ Array [
 ]
 `;
 
+exports[`renders components/checkbox/demo/custom-line-width.tsx correctly 1`] = `
+Array [
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+]
+`;
+
 exports[`renders components/checkbox/demo/debug-disable-popover.tsx correctly 1`] = `
 <div
   style="padding:56px"
diff --git a/components/checkbox/demo/custom-line-width.md b/components/checkbox/demo/custom-line-width.md
new file mode 100644
index 0000000000..78179f045c
--- /dev/null
+++ b/components/checkbox/demo/custom-line-width.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307
+
+## en-US
+
+测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307
diff --git a/components/checkbox/demo/custom-line-width.tsx b/components/checkbox/demo/custom-line-width.tsx
new file mode 100644
index 0000000000..645abe7e26
--- /dev/null
+++ b/components/checkbox/demo/custom-line-width.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Checkbox, ConfigProvider } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <ConfigProvider
+      theme={{
+        cssVar: false,
+        components: {
+          Checkbox: {
+            lineWidth: 6,
+          },
+        },
+      }}
+    >
+      <Checkbox checked />
+      <Checkbox />
+    </ConfigProvider>
+    <Checkbox checked />
+    <Checkbox />
+  </>
+);
+
+export default App;
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index a68efc757a..867068673a 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -26,6 +26,7 @@ Checkbox component.
 <code src="./demo/layout.tsx">Use with Grid</code>
 <code src="./demo/debug-line.tsx" debug>Same line</code>
 <code src="./demo/debug-disable-popover.tsx" debug>Disabled to show Tooltip</code>
+<code src="./demo/custom-line-width.tsx" debug>customize lineWidth</code>
 
 ## API
 
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index 0ee3ddd08d..6f3caf508f 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -27,6 +27,7 @@ demo:
 <code src="./demo/layout.tsx">布局</code>
 <code src="./demo/debug-line.tsx" debug>同行布局</code>
 <code src="./demo/debug-disable-popover.tsx" debug>禁用下的 Tooltip</code>
+<code src="./demo/custom-line-width.tsx" debug>自定义 lineWidth</code>
 
 ## API
 
diff --git a/components/checkbox/style/index.ts b/components/checkbox/style/index.ts
index 1695f774db..ae4a2dfc7c 100644
--- a/components/checkbox/style/index.ts
+++ b/components/checkbox/style/index.ts
@@ -96,9 +96,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         // Wrapper > Checkbox > inner
         [`${checkboxCls}-inner`]: {
           boxSizing: 'border-box',
-          position: 'relative',
-          top: 0,
-          insetInlineStart: 0,
           display: 'block',
           width: token.checkboxSize,
           height: token.checkboxSize,
@@ -113,7 +110,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
             boxSizing: 'border-box',
             position: 'absolute',
             top: '50%',
-            insetInlineStart: '21.5%',
+            insetInlineStart: '25%',
             display: 'table',
             width: token.calc(token.checkboxSize).div(14).mul(5).equal(),
             height: token.calc(token.checkboxSize).div(14).mul(8).equal(),
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index 7345276235..bbb6e55b14 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -76,7 +76,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   const mergedSize = useSize((ctx) => customizeSize ?? ctx ?? 'middle');
   const prefixCls = getPrefixCls('collapse', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Collapse');
@@ -126,6 +126,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
   const openMotion: CSSMotionProps = {
     ...initCollapseMotion(rootPrefixCls),
diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx
index c7c6e587b8..c0e8570785 100644
--- a/components/color-picker/ColorPicker.tsx
+++ b/components/color-picker/ColorPicker.tsx
@@ -135,9 +135,9 @@ const ColorPicker: CompoundedComponent = (props) => {
   // ===================== Style =====================
   const mergedSize = useSize(customizeSize);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
   const rtlCls = { [`${prefixCls}-rtl`]: direction };
-  const mergeRootCls = classNames(rootClassName, rootCls, rtlCls);
+  const mergeRootCls = classNames(rootClassName, cssVarCls, rootCls, rtlCls);
   const mergeCls = classNames(
     getStatusClassNames(prefixCls, contextStatus),
     {
diff --git a/components/config-provider/hooks/useCSSVarCls.ts b/components/config-provider/hooks/useCSSVarCls.ts
index c1faed92f6..a8db6d06cc 100644
--- a/components/config-provider/hooks/useCSSVarCls.ts
+++ b/components/config-provider/hooks/useCSSVarCls.ts
@@ -1,5 +1,10 @@
 import { useToken } from '../../theme/internal';
 
+/**
+ * This hook is only for cssVar to add root className for components.
+ * If root ClassName is needed, this hook could be refactored with `-root`
+ * @param prefixCls
+ */
 const useCSSVarCls = (prefixCls: string) => {
   const [, , , , cssVar] = useToken();
 
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 15d999c7c6..b7338be3a6 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -72,8 +72,8 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     const { format, showTime, picker } = props as any;
     const rootPrefixCls = getPrefixCls();
 
-    const cssVarCls = useCSSVarCls(prefixCls);
-    const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
     const additionalOverrideProps: any = {
       ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
@@ -147,6 +147,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
           className,
           rangePicker?.className,
           cssVarCls,
+          rootCls,
           rootClassName,
         )}
         style={{ ...rangePicker?.style, ...style }}
@@ -160,6 +161,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
           hashId,
           popupClassName || dropdownClassName,
           cssVarCls,
+          rootCls,
           rootClassName,
         )}
         popupStyle={{
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index 951c65ee6d..2aab988c00 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -80,8 +80,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const innerRef = React.useRef<RCPicker<DateType>>(null);
         const { format, showTime } = props as any;
 
-        const cssVarCls = useCSSVarCls(prefixCls);
-        const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+        const rootCls = useCSSVarCls(prefixCls);
+        const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
         useImperativeHandle(ref, () => ({
           focus: () => innerRef.current?.focus(),
@@ -174,6 +174,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               consumerStyle?.className,
               className,
               cssVarCls,
+              rootCls,
               rootClassName,
             )}
             style={{ ...consumerStyle?.style, ...style }}
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index 798deed0bb..c9042c78a9 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -93,7 +93,7 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
   const mergedSize = useSize(customizeSize);
   const rows = useRow(mergedColumn, mergedItems);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   // ======================== Render ========================
   const contextValue = React.useMemo(
@@ -115,6 +115,7 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
           className,
           rootClassName,
           hashId,
+          cssVarCls,
         )}
         style={{ ...descriptions?.style, ...style }}
         {...restProps}
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index dc507a51c9..5852be3397 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -36,7 +36,7 @@ const Divider: React.FC<DividerProps> = (props) => {
   } = props;
   const prefixCls = getPrefixCls('divider', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
   const hasChildren = !!children;
@@ -46,6 +46,7 @@ const Divider: React.FC<DividerProps> = (props) => {
     prefixCls,
     divider?.className,
     hashId,
+    cssVarCls,
     `${prefixCls}-${type}`,
     {
       [`${prefixCls}-with-text`]: hasChildren,
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 6437c2f052..80e6fa5bd9 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -72,7 +72,7 @@ const Drawer: React.FC<DrawerProps> & {
 
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const getContainer =
     // 有可能为 false，所以不能直接判断
@@ -87,6 +87,7 @@ const Drawer: React.FC<DrawerProps> & {
     },
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   // ========================== Warning ===========================
@@ -213,13 +214,14 @@ const PurePanel: React.FC<Omit<DrawerPanelProps, 'prefixCls'> & PurePanelInterfa
 
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const cls = classNames(
     prefixCls,
     `${prefixCls}-pure`,
     `${prefixCls}-${placement}`,
     hashId,
+    cssVarCls,
     className,
   );
 
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 9c22e81c6b..6a55432ed9 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -171,7 +171,7 @@ const Dropdown: CompoundedComponent = (props) => {
 
   const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const [, token] = useToken();
 
@@ -210,6 +210,7 @@ const Dropdown: CompoundedComponent = (props) => {
     overlayClassName,
     rootClassName,
     hashId,
+    cssVarCls,
     rootCls,
     dropdown?.className,
     { [`${prefixCls}-rtl`]: direction === 'rtl' },
@@ -253,7 +254,7 @@ const Dropdown: CompoundedComponent = (props) => {
     return (
       <OverrideProvider
         prefixCls={`${prefixCls}-menu`}
-        rootClassName={rootCls}
+        rootClassName={cssVarCls}
         expandIcon={
           <span className={`${prefixCls}-menu-submenu-arrow`}>
             <RightOutlined className={`${prefixCls}-menu-submenu-arrow-icon`} />
diff --git a/components/empty/index.tsx b/components/empty/index.tsx
index 002aadc26b..243dbcaa14 100644
--- a/components/empty/index.tsx
+++ b/components/empty/index.tsx
@@ -45,7 +45,7 @@ const Empty: CompoundedComponent = ({
   const { getPrefixCls, direction, empty } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('empty', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const [locale] = useLocale('Empty');
 
@@ -64,6 +64,7 @@ const Empty: CompoundedComponent = ({
     <div
       className={classNames(
         hashId,
+        cssVarCls,
         prefixCls,
         empty?.className,
         {
diff --git a/components/flex/index.tsx b/components/flex/index.tsx
index 001304aa92..1b0b5b83b4 100644
--- a/components/flex/index.tsx
+++ b/components/flex/index.tsx
@@ -31,7 +31,7 @@ const Flex = React.forwardRef<HTMLElement, FlexProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('flex', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const mergedVertical = vertical ?? ctxFlex?.vertical;
 
@@ -41,6 +41,7 @@ const Flex = React.forwardRef<HTMLElement, FlexProps>((props, ref) => {
     ctxFlex?.className,
     prefixCls,
     hashId,
+    cssVarCls,
     createFlexClassNames(prefixCls, props),
     {
       [`${prefixCls}-rtl`]: ctxDirection === 'rtl',
diff --git a/components/float-button/FloatButton.tsx b/components/float-button/FloatButton.tsx
index c1d1c31cd2..ecd3a81aac 100644
--- a/components/float-button/FloatButton.tsx
+++ b/components/float-button/FloatButton.tsx
@@ -39,12 +39,13 @@ const FloatButton = React.forwardRef<FloatButtonElement, FloatButtonProps>((prop
   const groupShape = useContext<FloatButtonShape | undefined>(FloatButtonGroupContext);
   const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const mergeShape = groupShape || shape;
 
   const classString = classNames(
     hashId,
+    cssVarCls,
     rootCls,
     prefixCls,
     className,
diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx
index 1ea8daeb1a..f366681fc3 100644
--- a/components/float-button/FloatButtonGroup.tsx
+++ b/components/float-button/FloatButtonGroup.tsx
@@ -34,10 +34,10 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
   const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
   const groupPrefixCls = `${prefixCls}-group`;
 
-  const groupCls = classNames(groupPrefixCls, hashId, rootCls, className, {
+  const groupCls = classNames(groupPrefixCls, hashId, cssVarCls, rootCls, className, {
     [`${groupPrefixCls}-rtl`]: direction === 'rtl',
     [`${groupPrefixCls}-${shape}`]: shape,
     [`${groupPrefixCls}-${shape}-shadow`]: !trigger,
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index 3303851317..e9f88e53a0 100644
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@@ -55,8 +55,8 @@ const ErrorList: React.FC<ErrorListProps> = ({
 
   const baseClassName = `${prefixCls}-item-explain`;
 
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const collapseMotion: CSSMotionProps = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]);
 
@@ -97,7 +97,14 @@ const ErrorList: React.FC<ErrorListProps> = ({
         return (
           <div
             {...helpProps}
-            className={classNames(baseClassName, holderClassName, cssVarCls, rootClassName, hashId)}
+            className={classNames(
+              baseClassName,
+              holderClassName,
+              cssVarCls,
+              rootCls,
+              rootClassName,
+              hashId,
+            )}
             style={holderStyle}
             role="alert"
           >
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index ec78fe22f3..57ad4aafd0 100644
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -104,8 +104,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
   // Style
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const formClassName = classNames(
     prefixCls,
@@ -116,6 +116,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
       [`${prefixCls}-${mergedSize}`]: mergedSize,
     },
     cssVarCls,
+    rootCls,
     hashId,
     contextForm?.className,
     className,
diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx
index f7181415b7..4978c24668 100644
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@@ -127,8 +127,8 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
   // Style
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   // ========================= Warn =========================
   const warning = devUseWarning('Form.Item');
@@ -242,7 +242,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
       <ItemHolder
         key="row"
         {...props}
-        className={classNames(className, cssVarCls, hashId)}
+        className={classNames(className, cssVarCls, rootCls, hashId)}
         prefixCls={prefixCls}
         fieldId={fieldId}
         isRequired={isRequired}
diff --git a/components/grid/col.tsx b/components/grid/col.tsx
index 4ae3bd074f..ab132c196f 100644
--- a/components/grid/col.tsx
+++ b/components/grid/col.tsx
@@ -68,7 +68,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('col', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useColStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useColStyle(prefixCls);
 
   let sizeClassObj = {};
   sizes.forEach((size) => {
@@ -107,6 +107,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
     className,
     sizeClassObj,
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = {};
diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index ab212a17e6..4b097ca34a 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -147,7 +147,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('row', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useRowStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useRowStyle(prefixCls);
 
   const gutters = getGutter();
   const classes = classNames(
@@ -160,6 +160,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     },
     className,
     hashId,
+    cssVarCls,
   );
 
   // Add gutter related style
diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx
index b9acbed691..31bd7f0384 100644
--- a/components/image/PreviewGroup.tsx
+++ b/components/image/PreviewGroup.tsx
@@ -40,7 +40,7 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
   const rootPrefixCls = getPrefixCls();
 
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const [zIndex] = useZIndex(
     'ImagePreview',
@@ -52,7 +52,12 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
       return preview;
     }
     const _preview = typeof preview === 'object' ? preview : {};
-    const mergedRootClassName = classNames(hashId, rootCls, _preview.rootClassName ?? '');
+    const mergedRootClassName = classNames(
+      hashId,
+      cssVarCls,
+      rootCls,
+      _preview.rootClassName ?? '',
+    );
 
     return {
       ..._preview,
diff --git a/components/image/index.tsx b/components/image/index.tsx
index 059b4bd514..4e88ae5176 100644
--- a/components/image/index.tsx
+++ b/components/image/index.tsx
@@ -38,9 +38,9 @@ const Image: CompositionImage<ImageProps> = (props) => {
   const imageLocale = contextLocale.Image || defaultLocale.Image;
   // Style
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
-  const mergedRootClassName = classNames(rootClassName, hashId, rootCls);
+  const mergedRootClassName = classNames(rootClassName, hashId, cssVarCls, rootCls);
 
   const mergedClassName = classNames(className, hashId, image?.className);
 
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index b0b016fb73..8c8cfd89be 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -68,8 +68,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
   // Style
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
   let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
@@ -127,7 +127,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     <RcInputNumber
       ref={inputRef}
       disabled={mergedDisabled}
-      className={classNames(cssVarCls, className, rootClassName, compactItemClassnames)}
+      className={classNames(cssVarCls, rootCls, className, rootClassName, compactItemClassnames)}
       upHandler={upIcon}
       downHandler={downIcon}
       prefixCls={prefixCls}
diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index e006902061..7018aa0b56 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -111,8 +111,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const inputRef = useRef<InputRef>(null);
 
   // Style
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   // ===================== Compact Item =====================
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
@@ -201,6 +201,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         className,
         rootClassName,
         cssVarCls,
+        rootCls,
         hashId,
         compactItemClassnames,
         input?.className,
diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index ccd5e4de6b..0af008f753 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -96,8 +96,8 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
   }
 
   // ===================== Style =====================
-  const cssVarCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants);
 
@@ -106,7 +106,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
       {...rest}
       disabled={mergedDisabled}
       allowClear={mergedAllowClear}
-      className={classNames(cssVarCls, className, rootClassName)}
+      className={classNames(cssVarCls, rootCls, className, rootClassName)}
       classes={{
         affixWrapper: classNames(
           `${prefixCls}-textarea-affix-wrapper`,
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index f1711a3f7e..5723064a94 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -47,13 +47,18 @@ const Basic = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((props, re
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('layout', customizePrefixCls);
 
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls);
 
   const prefixWithSuffixCls = suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls;
 
   return wrapSSR(
     <TagName
-      className={classNames(customizePrefixCls || prefixWithSuffixCls, className, hashId)}
+      className={classNames(
+        customizePrefixCls || prefixWithSuffixCls,
+        className,
+        hashId,
+        cssVarCls,
+      )}
       ref={ref}
       {...others}
     />,
@@ -83,7 +88,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
 
   const mergedHasSider = useHasSider(siders, children, hasSider);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const classString = classNames(
     prefixCls,
     {
@@ -94,6 +99,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const contextValue = React.useMemo(
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 4df251f5f4..35bedd9dc4 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -141,7 +141,7 @@ function List<T>({
   const prefixCls = getPrefixCls('list', customizePrefixCls);
 
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   let loadingProp = loading;
   if (typeof loadingProp === 'boolean') {
@@ -183,6 +183,7 @@ function List<T>({
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const paginationProps = extendsObject<PaginationConfig>(
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index a24acade20..c76a813784 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -156,7 +156,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
 
   // Style
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const mergedClassName = classNames(
     {
@@ -169,6 +169,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
     !hasFeedback && className,
     rootClassName,
     hashId,
+    cssVarCls,
     rootCls,
   );
 
@@ -184,11 +185,11 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
       filterOption={mentionsfilterOption}
       onFocus={onFocus}
       onBlur={onBlur}
-      dropdownClassName={classNames(popupClassName, rootClassName, hashId, rootCls)}
+      dropdownClassName={classNames(popupClassName, rootClassName, hashId, cssVarCls, rootCls)}
       ref={mergedRef}
       options={mergedOptions}
       suffix={hasFeedback && feedbackIcon}
-      classes={{ affixWrapper: classNames(rootCls, hashId, className) }}
+      classes={{ affixWrapper: classNames(hashId, className, cssVarCls, rootCls) }}
     >
       {mentionOptions}
     </RcMentions>
diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx
index 04d74a45f0..be55b3379f 100644
--- a/components/menu/menu.tsx
+++ b/components/menu/menu.tsx
@@ -122,7 +122,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls, !override);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls, !override);
   const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className);
 
   // ====================== Expand Icon ========================
@@ -181,7 +181,13 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
           defaultMotions={defaultMotions}
           expandIcon={mergedExpandIcon}
           ref={ref}
-          rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName, rootCls)}
+          rootClassName={classNames(
+            rootClassName,
+            hashId,
+            overrideObj.rootClassName,
+            cssVarCls,
+            rootCls,
+          )}
         >
           {mergedChildren}
         </RcMenu>
diff --git a/components/message/PurePanel.tsx b/components/message/PurePanel.tsx
index 3a4da6c621..9213b4c216 100644
--- a/components/message/PurePanel.tsx
+++ b/components/message/PurePanel.tsx
@@ -48,13 +48,19 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
   const prefixCls = staticPrefixCls || getPrefixCls('message');
 
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   return wrapCSSVar(
     <Notice
       {...restProps}
       prefixCls={prefixCls}
-      className={classNames(className, hashId, `${prefixCls}-notice-pure-panel`, rootCls)}
+      className={classNames(
+        className,
+        hashId,
+        `${prefixCls}-notice-pure-panel`,
+        cssVarCls,
+        rootCls,
+      )}
       eventKey="pure"
       duration={null}
       content={
diff --git a/components/message/useMessage.tsx b/components/message/useMessage.tsx
index 47419c7675..f29dbf8568 100644
--- a/components/message/useMessage.tsx
+++ b/components/message/useMessage.tsx
@@ -19,6 +19,7 @@ import type {
 import { PureContent } from './PurePanel';
 import useStyle from './style';
 import { getMotion, wrapPromiseFn } from './util';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 const DEFAULT_OFFSET = 8;
 const DEFAULT_DURATION = 3;
@@ -36,9 +37,12 @@ interface HolderRef extends NotificationAPI {
 }
 
 const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
   return wrapCSSVar(
-    <NotificationProvider classNames={{ list: hashId }}>{children}</NotificationProvider>,
+    <NotificationProvider classNames={{ list: classNames(hashId, cssVarCls, rootCls) }}>
+      {children}
+    </NotificationProvider>,
   );
 };
 
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index ba97c87c26..a2a47e63c3 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -95,7 +95,7 @@ const Modal: React.FC<ModalProps> = (props) => {
   const rootPrefixCls = getPrefixCls();
   // Style
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const wrapClassNameExtended = classNames(wrapClassName, {
     [`${prefixCls}-centered`]: !!centered,
@@ -131,7 +131,7 @@ const Modal: React.FC<ModalProps> = (props) => {
             zIndex={zIndex}
             getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
             prefixCls={prefixCls}
-            rootClassName={classNames(hashId, rootClassName, rootCls)}
+            rootClassName={classNames(hashId, rootClassName, cssVarCls, rootCls)}
             footer={dialogFooter}
             visible={open ?? visible}
             mousePosition={restProps.mousePosition ?? mousePosition}
diff --git a/components/modal/PurePanel.tsx b/components/modal/PurePanel.tsx
index 3f5ded5573..9261be0904 100644
--- a/components/modal/PurePanel.tsx
+++ b/components/modal/PurePanel.tsx
@@ -37,7 +37,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
   const rootPrefixCls = getPrefixCls();
   const prefixCls = customizePrefixCls || getPrefixCls('modal');
   const rootCls = useCSSVarCls(rootPrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const confirmPrefixCls = `${prefixCls}-confirm`;
 
@@ -76,6 +76,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
         type && confirmPrefixCls,
         type && `${confirmPrefixCls}-${type}`,
         className,
+        cssVarCls,
         rootCls,
       )}
       {...restProps}
diff --git a/components/notification/PurePanel.tsx b/components/notification/PurePanel.tsx
index 8524f090fb..7d27d45f82 100644
--- a/components/notification/PurePanel.tsx
+++ b/components/notification/PurePanel.tsx
@@ -100,10 +100,12 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
   const noticePrefixCls = `${prefixCls}-notice`;
 
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   return wrapCSSVar(
-    <div className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className, rootCls)}>
+    <div
+      className={classNames(`${noticePrefixCls}-pure-panel`, hashId, className, cssVarCls, rootCls)}
+    >
       <PurePanelStyle prefixCls={prefixCls} />
       <Notice
         {...restProps}
diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx
index ce2751cb14..0042b0b3fc 100644
--- a/components/notification/useNotification.tsx
+++ b/components/notification/useNotification.tsx
@@ -17,6 +17,7 @@ import { getCloseIcon, PureContent } from './PurePanel';
 import useStyle from './style';
 import { getMotion, getPlacementStyle } from './util';
 import { useToken } from '../theme/internal';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 const DEFAULT_OFFSET = 24;
 const DEFAULT_DURATION = 4.5;
@@ -35,9 +36,12 @@ interface HolderRef extends NotificationAPI {
 }
 
 const Wrapper: FC<PropsWithChildren<{ prefixCls: string }>> = ({ children, prefixCls }) => {
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
   return wrapCSSVar(
-    <NotificationProvider classNames={{ list: hashId }}>{children}</NotificationProvider>,
+    <NotificationProvider classNames={{ list: classNames(hashId, cssVarCls, rootCls) }}>
+      {children}
+    </NotificationProvider>,
   );
 };
 
diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
index 5f0ce508a0..dec866b2b7 100644
--- a/components/pagination/Pagination.tsx
+++ b/components/pagination/Pagination.tsx
@@ -57,7 +57,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
   const prefixCls = getPrefixCls('pagination', customizePrefixCls);
 
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const mergedShowSizeChanger = showSizeChanger ?? pagination.showSizeChanger;
 
@@ -120,6 +120,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = { ...pagination?.style, ...style };
diff --git a/components/popover/PurePanel.tsx b/components/popover/PurePanel.tsx
index a44ae6bb2e..f3da1a50d5 100644
--- a/components/popover/PurePanel.tsx
+++ b/components/popover/PurePanel.tsx
@@ -61,13 +61,20 @@ export const RawPurePanel: React.FC<RawPurePanelProps> = (props) => {
 };
 
 const PurePanel: React.FC<PurePanelProps> = (props) => {
-  const { prefixCls: customizePrefixCls, ...restProps } = props;
+  const { prefixCls: customizePrefixCls, className, ...restProps } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('popover', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
-  return wrapCSSVar(<RawPurePanel {...restProps} prefixCls={prefixCls} hashId={hashId} />);
+  return wrapCSSVar(
+    <RawPurePanel
+      {...restProps}
+      prefixCls={prefixCls}
+      hashId={hashId}
+      className={classNames(className, cssVarCls)}
+    />,
+  );
 };
 
 export default PurePanel;
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index a646c49a5c..a53c8de56e 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -45,10 +45,10 @@ const Popover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('popover', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const rootPrefixCls = getPrefixCls();
 
-  const overlayCls = classNames(overlayClassName, hashId);
+  const overlayCls = classNames(overlayClassName, hashId, cssVarCls);
 
   return wrapCSSVar(
     <Tooltip
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index 6157bca436..c1e4248470 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -97,7 +97,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     progress: progressStyle,
   } = React.useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('progress', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const progressInfo = React.useMemo<React.ReactNode>(() => {
     if (!showInfo) {
@@ -188,6 +188,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx
index 370fda18a1..b51a1aa52b 100644
--- a/components/qr-code/index.tsx
+++ b/components/qr-code/index.tsx
@@ -35,7 +35,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('qrcode', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const imageSettings: QRProps['imageSettings'] = {
     src: icon,
@@ -74,7 +74,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
     return null;
   }
 
-  const mergedCls = classNames(prefixCls, className, rootClassName, hashId, {
+  const mergedCls = classNames(prefixCls, className, rootClassName, hashId, cssVarCls, {
     [`${prefixCls}-borderless`]: !bordered,
   });
 
diff --git a/components/radio/group.tsx b/components/radio/group.tsx
index d9d84f00c3..5fe7047486 100644
--- a/components/radio/group.tsx
+++ b/components/radio/group.tsx
@@ -51,7 +51,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
 
   // Style
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   let childrenToRender = children;
   // 如果存在 options, 优先使用
@@ -102,6 +102,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
     className,
     rootClassName,
     hashId,
+    cssVarCls,
     rootCls,
   );
   return wrapCSSVar(
diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx
index b3f9380a00..0a253e7b95 100644
--- a/components/radio/radio.tsx
+++ b/components/radio/radio.tsx
@@ -49,7 +49,7 @@ const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (pro
 
   // Style
   const rootCls = useCSSVarCls(radioPrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(radioPrefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(radioPrefixCls, rootCls);
 
   const radioProps: RadioProps = { ...restProps };
 
@@ -76,6 +76,7 @@ const InternalRadio: React.ForwardRefRenderFunction<RadioRef, RadioProps> = (pro
     className,
     rootClassName,
     hashId,
+    cssVarCls,
     rootCls,
   );
 
diff --git a/components/rate/index.tsx b/components/rate/index.tsx
index 714b372fa7..6ad92c28b9 100644
--- a/components/rate/index.tsx
+++ b/components/rate/index.tsx
@@ -38,7 +38,7 @@ const Rate = React.forwardRef<RateRef, RateProps>((props, ref) => {
   const ratePrefixCls = getPrefixCls('rate', prefixCls);
 
   // Style
-  const [wrapCSSVar, hashId] = useStyle(ratePrefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(ratePrefixCls);
 
   const mergedStyle: React.CSSProperties = { ...rate?.style, ...style };
 
@@ -48,7 +48,7 @@ const Rate = React.forwardRef<RateRef, RateProps>((props, ref) => {
       character={character}
       characterRender={characterRender}
       {...rest}
-      className={classNames(className, rootClassName, hashId, rate?.className)}
+      className={classNames(className, rootClassName, hashId, cssVarCls, rate?.className)}
       style={mergedStyle}
       prefixCls={ratePrefixCls}
       direction={direction}
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 7ebd918d26..3ee8d1ab55 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -125,7 +125,7 @@ const Result: ResultType = ({
   const prefixCls = getPrefixCls('result', customizePrefixCls);
 
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const className = classNames(
     prefixCls,
@@ -135,6 +135,7 @@ const Result: ResultType = ({
     rootClassName,
     { [`${prefixCls}-rtl`]: direction === 'rtl' },
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = { ...result?.style, ...style };
diff --git a/components/segmented/index.tsx b/components/segmented/index.tsx
index 2179984e31..5b32cdaba0 100644
--- a/components/segmented/index.tsx
+++ b/components/segmented/index.tsx
@@ -57,7 +57,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
   const { getPrefixCls, direction, segmented } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('segmented', customizePrefixCls);
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   // ===================== Size =====================
   const mergedSize = useSize(customSize);
@@ -93,6 +93,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref)
       [`${prefixCls}-lg`]: mergedSize === 'large',
     },
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = { ...segmented?.style, ...style };
diff --git a/components/select/index.tsx b/components/select/index.tsx
index e3cf3d8820..1235bb3ea5 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -135,7 +135,7 @@ const InternalSelect = <
   const [variant, enableVariantCls] = useVariants(customizeVariant, bordered, SelectVariants);
 
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const mode = React.useMemo(() => {
     const { mode: m } = props as InternalSelectProps<OptionType>;
@@ -200,6 +200,7 @@ const InternalSelect = <
       [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
     },
     rootClassName,
+    cssVarCls,
     rootCls,
     hashId,
   );
@@ -223,6 +224,7 @@ const InternalSelect = <
     select?.className,
     className,
     rootClassName,
+    cssVarCls,
     rootCls,
     hashId,
   );
diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx
index 986515f628..b37fa64216 100644
--- a/components/skeleton/Avatar.tsx
+++ b/components/skeleton/Avatar.tsx
@@ -21,7 +21,7 @@ const SkeletonAvatar: React.FC<AvatarProps> = (props) => {
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const otherProps = omit(props, ['prefixCls', 'className']);
   const cls = classNames(
@@ -33,6 +33,7 @@ const SkeletonAvatar: React.FC<AvatarProps> = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/skeleton/Button.tsx b/components/skeleton/Button.tsx
index ae94a10f13..0645d6ec53 100644
--- a/components/skeleton/Button.tsx
+++ b/components/skeleton/Button.tsx
@@ -23,7 +23,7 @@ const SkeletonButton: React.FC<SkeletonButtonProps> = (props) => {
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const otherProps = omit(props, ['prefixCls']);
   const cls = classNames(
@@ -36,6 +36,7 @@ const SkeletonButton: React.FC<SkeletonButtonProps> = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/skeleton/Image.tsx b/components/skeleton/Image.tsx
index bf367e394d..8f0f23a0ff 100644
--- a/components/skeleton/Image.tsx
+++ b/components/skeleton/Image.tsx
@@ -13,7 +13,7 @@ const SkeletonImage: React.FC<SkeletonImageProps> = (props) => {
   const { prefixCls: customizePrefixCls, className, rootClassName, style, active } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const cls = classNames(
     prefixCls,
     `${prefixCls}-element`,
@@ -23,6 +23,7 @@ const SkeletonImage: React.FC<SkeletonImageProps> = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx
index 166580f4b3..4df9784a8c 100644
--- a/components/skeleton/Input.tsx
+++ b/components/skeleton/Input.tsx
@@ -23,7 +23,7 @@ const SkeletonInput: React.FC<SkeletonInputProps> = (props) => {
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const otherProps = omit(props, ['prefixCls']);
   const cls = classNames(
@@ -36,6 +36,7 @@ const SkeletonInput: React.FC<SkeletonInputProps> = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/skeleton/Node.tsx b/components/skeleton/Node.tsx
index 754d728ab8..a924d26b33 100644
--- a/components/skeleton/Node.tsx
+++ b/components/skeleton/Node.tsx
@@ -21,7 +21,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
   } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const cls = classNames(
     prefixCls,
@@ -32,6 +32,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = (props) => {
     hashId,
     className,
     rootClassName,
+    cssVarCls,
   );
 
   const content = children ?? <DotChartOutlined />;
diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx
index cdbb60aa65..24dc2ab9b8 100644
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@@ -103,7 +103,7 @@ const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = (props) => {
 
   const { getPrefixCls, direction, skeleton } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   if (loading || !('loading' in props)) {
     const hasAvatar = !!avatar;
@@ -172,6 +172,7 @@ const Skeleton: React.FC<SkeletonProps> & CompoundedComponent = (props) => {
       className,
       rootClassName,
       hashId,
+      cssVarCls,
     );
 
     return wrapCSSVar(
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 93024cf2b7..f5c46ed98a 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -162,7 +162,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
 
   const prefixCls = getPrefixCls('slider', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const cls = classNames(
     className,
@@ -172,6 +172,7 @@ const Slider = React.forwardRef<SliderRef, SliderSingleProps | SliderRangeProps>
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     hashId,
+    cssVarCls,
   );
 
   // make reverse default on rtl direction
diff --git a/components/space/index.tsx b/components/space/index.tsx
index b79d386950..729dae0013 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -63,7 +63,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
 
   const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
   const prefixCls = getPrefixCls('space', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const cls = classNames(
     prefixCls,
@@ -78,6 +78,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
     },
     className,
     rootClassName,
+    cssVarCls,
   );
 
   const itemClassName = classNames(
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index 2a037f8aac..565d1a23de 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -28,19 +28,14 @@ export interface SpinProps {
   fullscreen?: boolean;
 }
 
-export interface SpinClassProps extends SpinProps {
-  hashId: string;
-  spinPrefixCls: string;
-}
-
-export type SpinFCType = React.FC<SpinProps> & {
+export type SpinType = React.FC<SpinProps> & {
   setDefaultIndicator: (indicator: React.ReactNode) => void;
 };
 
 // Render indicator
 let defaultIndicator: React.ReactNode = null;
 
-function renderIndicator(prefixCls: string, props: SpinClassProps): React.ReactNode {
+function renderIndicator(prefixCls: string, props: SpinProps): React.ReactNode {
   const { indicator } = props;
   const dotClassName = `${prefixCls}-dot`;
 
@@ -75,9 +70,9 @@ function shouldDelay(spinning?: boolean, delay?: number): boolean {
   return !!spinning && !!delay && !isNaN(Number(delay));
 }
 
-const Spin: React.FC<SpinClassProps> = (props) => {
+const Spin: SpinType = (props) => {
   const {
-    spinPrefixCls: prefixCls,
+    prefixCls: customizePrefixCls,
     spinning: customSpinning = true,
     delay = 0,
     className,
@@ -87,11 +82,16 @@ const Spin: React.FC<SpinClassProps> = (props) => {
     wrapperClassName,
     style,
     children,
-    hashId,
     fullscreen,
     ...restProps
   } = props;
 
+  const { getPrefixCls } = React.useContext(ConfigContext);
+
+  const prefixCls = getPrefixCls('spin', customizePrefixCls);
+
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
+
   const [spinning, setSpinning] = React.useState<boolean>(
     () => customSpinning && !shouldDelay(customSpinning, delay),
   );
@@ -138,6 +138,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const containerClassName = classNames(`${prefixCls}-container`, {
@@ -145,7 +146,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
   });
 
   // fix https://fb.me/react-unknown-prop
-  const divProps = omit(restProps, ['indicator', 'prefixCls']);
+  const divProps = omit(restProps, ['indicator']);
 
   const mergedStyle: React.CSSProperties = { ...spin?.style, ...style };
 
@@ -165,43 +166,27 @@ const Spin: React.FC<SpinClassProps> = (props) => {
   );
 
   if (isNestedPattern) {
-    return (
+    return wrapCSSVar(
       <div
         {...divProps}
-        className={classNames(`${prefixCls}-nested-loading`, wrapperClassName, hashId)}
+        className={classNames(`${prefixCls}-nested-loading`, wrapperClassName, hashId, cssVarCls)}
       >
         {spinning && <div key="loading">{spinElement}</div>}
         <div className={containerClassName} key="container">
           {children}
         </div>
-      </div>
+      </div>,
     );
   }
-  return spinElement;
+  return wrapCSSVar(spinElement);
 };
 
-const SpinFC: SpinFCType = (props) => {
-  const { prefixCls: customizePrefixCls } = props;
-  const { getPrefixCls } = React.useContext(ConfigContext);
-
-  const spinPrefixCls = getPrefixCls('spin', customizePrefixCls);
-
-  const [wrapCSSVar, hashId] = useStyle(spinPrefixCls);
-
-  const spinClassProps: SpinClassProps = {
-    ...props,
-    spinPrefixCls,
-    hashId,
-  };
-  return wrapCSSVar(<Spin {...spinClassProps} />);
-};
-
-SpinFC.setDefaultIndicator = (indicator: React.ReactNode) => {
+Spin.setDefaultIndicator = (indicator: React.ReactNode) => {
   defaultIndicator = indicator;
 };
 
 if (process.env.NODE_ENV !== 'production') {
-  SpinFC.displayName = 'Spin';
+  Spin.displayName = 'Spin';
 }
 
-export default SpinFC;
+export default Spin;
diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index 44ddb46828..d87fea5870 100644
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -47,7 +47,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
 
   const prefixCls = getPrefixCls('statistic', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const valueNode: React.ReactNode = (
     <StatisticNumber
@@ -68,6 +68,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 93ba3775fd..60ae65cf21 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -79,7 +79,7 @@ const Steps: CompoundedComponent = (props) => {
 
   const prefixCls = getPrefixCls('steps', props.prefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const isInline = props.type === 'inline';
   const iconPrefix = getPrefixCls('', props.iconPrefix);
@@ -97,6 +97,7 @@ const Steps: CompoundedComponent = (props) => {
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
   const icons = {
     finish: <CheckOutlined className={`${prefixCls}-finish-icon`} />,
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 8eb2667e94..0d7340ce92 100755
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -91,7 +91,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((props, ref) =>
   );
 
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const mergedSize = useSize(customizeSize);
 
@@ -105,6 +105,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((props, ref) =>
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = { ...SWITCH?.style, ...style };
diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx
index eb8a0eec14..53436e41f7 100644
--- a/components/table/InternalTable.tsx
+++ b/components/table/InternalTable.tsx
@@ -204,7 +204,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
 
   const [, token] = useToken();
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const mergedExpandable: ExpandableConfig<RecordType> = {
     childrenColumnName: legacyChildrenColumnName,
@@ -544,6 +544,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
   }
 
   const wrapperClassNames = classNames(
+    cssVarCls,
     rootCls,
     `${prefixCls}-wrapper`,
     table?.className,
@@ -606,6 +607,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
               [`${prefixCls}-bordered`]: bordered,
               [`${prefixCls}-empty`]: rawData.length === 0,
             },
+            cssVarCls,
             rootCls,
             hashId,
           )}
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index 54005a40ee..915dd0f52c 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -55,7 +55,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
   const { direction, tabs, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('tabs', customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   let editable: EditableConfig | undefined;
   if (type === 'editable-card') {
@@ -106,9 +106,10 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
         className,
         rootClassName,
         hashId,
+        cssVarCls,
         rootCls,
       )}
-      popupClassName={classNames(popupClassName, hashId, rootCls)}
+      popupClassName={classNames(popupClassName, hashId, cssVarCls, rootCls)}
       style={mergedStyle}
       editable={editable}
       moreIcon={moreIcon}
diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx
index 83a2ba6797..6f529386bf 100644
--- a/components/tag/CheckableTag.tsx
+++ b/components/tag/CheckableTag.tsx
@@ -38,7 +38,7 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props
 
   const prefixCls = getPrefixCls('tag', customizePrefixCls);
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const cls = classNames(
     prefixCls,
@@ -49,6 +49,7 @@ const CheckableTag = React.forwardRef<HTMLSpanElement, CheckableTagProps>((props
     tag?.className,
     className,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index 7a6ceff6b1..25456f7bbf 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -79,7 +79,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   };
 
   const prefixCls = getPrefixCls('tag', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   // Style
 
   const tagClassName = classNames(
@@ -95,6 +95,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const handleCloseClick = (e: React.MouseEvent<HTMLElement>) => {
diff --git a/components/theme/util/genComponentStyleHook.tsx b/components/theme/util/genComponentStyleHook.tsx
index 4355d23f0c..2aaa8192e9 100644
--- a/components/theme/util/genComponentStyleHook.tsx
+++ b/components/theme/util/genComponentStyleHook.tsx
@@ -3,7 +3,6 @@ import type { ComponentType, FC, ReactElement } from 'react';
 import React, { useContext } from 'react';
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { token2CSSVar, useCSSVarRegister, useStyleRegister } from '@ant-design/cssinjs';
-import classNames from 'classnames';
 import { warning } from 'rc-util';
 
 import { ConfigContext } from '../../config-provider/context';
@@ -258,7 +257,7 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
       },
     );
 
-    return [wrapSSR, classNames(hashId, cssVar?.key)];
+    return [wrapSSR, hashId];
   };
 }
 
@@ -364,22 +363,25 @@ const genCSSVarRegister = <C extends OverrideComponent>(
   const useCSSVar = (rootCls: string) => {
     const [, , , , cssVar] = useToken();
 
-    return (node: ReactElement): ReactElement =>
-      injectStyle && cssVar ? (
-        <>
-          <CSSVarRegister rootCls={rootCls} cssVar={cssVar} component={component} />
-          {node}
-        </>
-      ) : (
-        node
-      );
+    return [
+      (node: ReactElement): ReactElement =>
+        injectStyle && cssVar ? (
+          <>
+            <CSSVarRegister rootCls={rootCls} cssVar={cssVar} component={component} />
+            {node}
+          </>
+        ) : (
+          node
+        ),
+      cssVar?.key,
+    ] as const;
   };
 
   return useCSSVar;
 };
 
 export const genStyleHooks = <C extends OverrideComponent>(
-  component: C,
+  component: C | [C, string],
   styleFn: GenStyleFn<C>,
   getDefaultToken?: GetDefaultToken<C>,
   options?: {
@@ -414,12 +416,16 @@ export const genStyleHooks = <C extends OverrideComponent>(
 ) => {
   const useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, options);
 
-  const useCSSVar = genCSSVarRegister(component, getDefaultToken, options);
+  const useCSSVar = genCSSVarRegister(
+    Array.isArray(component) ? component[0] : component,
+    getDefaultToken,
+    options,
+  );
 
   return (prefixCls: string, rootCls: string = prefixCls) => {
     const [, hashId] = useStyle(prefixCls);
-    const wrapCSSVar = useCSSVar(rootCls);
+    const [wrapCSSVar, cssVarCls] = useCSSVar(rootCls);
 
-    return [wrapCSSVar, hashId] as const;
+    return [wrapCSSVar, hashId, cssVarCls] as const;
   };
 };
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index 78b31c112a..f4becfdb0d 100644
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@@ -43,14 +43,14 @@ const Timeline: CompoundedComponent = (props) => {
 
   // Style
   const rootCls = useCSSVarCls(prefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
   const mergedItems: TimelineItemProps[] = useItems(items, children);
 
   return wrapCSSVar(
     <TimelineItemList
       {...restProps}
-      className={classNames(timeline?.className, className, rootCls)}
+      className={classNames(timeline?.className, className, cssVarCls, rootCls)}
       style={{ ...timeline?.style, ...style }}
       prefixCls={prefixCls}
       direction={direction}
diff --git a/components/tooltip/PurePanel.tsx b/components/tooltip/PurePanel.tsx
index 63c7bdd4f1..6687767e6d 100644
--- a/components/tooltip/PurePanel.tsx
+++ b/components/tooltip/PurePanel.tsx
@@ -21,7 +21,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   // Color
   const colorInfo = parseColor(prefixCls, color);
@@ -35,6 +35,7 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
 
   const cls = classNames(
     hashId,
+    cssVarCls,
     prefixCls,
     `${prefixCls}-pure`,
     `${prefixCls}-placement-${placement}`,
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 6849ea4da2..ece825a564 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -274,7 +274,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
       : childProps.className;
 
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, !injectFromPopover);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, !injectFromPopover);
 
   // Color
   const colorInfo = parseColor(prefixCls, color);
@@ -292,6 +292,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
     colorInfo.className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   // ============================ zIndex ============================
diff --git a/components/tour/PurePanel.tsx b/components/tour/PurePanel.tsx
index b276e75f65..da63b62b09 100644
--- a/components/tour/PurePanel.tsx
+++ b/components/tour/PurePanel.tsx
@@ -23,13 +23,18 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('tour', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   return wrapCSSVar(
     <PopoverRawPurePanel
       prefixCls={prefixCls}
       hashId={hashId}
-      className={classNames(className, `${prefixCls}-pure`, type && `${prefixCls}-${type}`)}
+      className={classNames(
+        className,
+        `${prefixCls}-pure`,
+        type && `${prefixCls}-${type}`,
+        cssVarCls,
+      )}
       style={style}
     >
       <TourPanel stepProps={{ ...restProps, prefixCls, total }} current={current} type={type} />
diff --git a/components/tour/index.tsx b/components/tour/index.tsx
index 24dee25f9b..6785ee3745 100644
--- a/components/tour/index.tsx
+++ b/components/tour/index.tsx
@@ -26,7 +26,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
   } = props;
   const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('tour', customizePrefixCls);
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const [, token] = useToken();
 
   const mergedSteps = useMemo(
@@ -54,6 +54,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     hashId,
+    cssVarCls,
     rootClassName,
   );
 
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index bb5138577e..67207cd530 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -151,7 +151,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
   } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('transfer', customizePrefixCls);
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   // Fill record with `key`
   const [mergedDataSource, leftDataSource, rightDataSource] = useData(
@@ -411,6 +411,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const [contextLocale] = useLocale('Transfer', defaultLocale.Transfer);
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 85f6cfb19e..e2b7741b1e 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -154,7 +154,7 @@ const InternalTreeSelect = <
 
   const rootCls = useCSSVarCls(prefixCls);
   const treeSelectRootCls = useCSSVarCls(treeSelectPrefixCls);
-  const [wrapCSSVar, hashId] = useSelectStyle(prefixCls, rootCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useSelectStyle(prefixCls, rootCls);
   const [treeSelectWrapCSSVar] = useStyle(treeSelectPrefixCls, treePrefixCls, treeSelectRootCls);
 
   const mergedDropdownClassName = classNames(
@@ -164,6 +164,7 @@ const InternalTreeSelect = <
       [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
     },
     rootClassName,
+    cssVarCls,
     rootCls,
     treeSelectRootCls,
     hashId,
@@ -243,6 +244,7 @@ const InternalTreeSelect = <
     compactItemClassnames,
     className,
     rootClassName,
+    cssVarCls,
     rootCls,
     treeSelectRootCls,
     hashId,
diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
index 02764df584..c9f2282144 100644
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@@ -193,7 +193,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     dropIndicatorRender,
   };
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const draggableConfig = React.useMemo(() => {
     if (!draggable) {
@@ -248,6 +248,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
         tree?.className,
         className,
         hashId,
+        cssVarCls,
       )}
       direction={direction}
       checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
diff --git a/components/typography/Editable.tsx b/components/typography/Editable.tsx
index 917283ebe3..08e699c6ba 100644
--- a/components/typography/Editable.tsx
+++ b/components/typography/Editable.tsx
@@ -115,7 +115,7 @@ const Editable: React.FC<EditableProps> = (props) => {
 
   const textClassName = component ? `${prefixCls}-${component}` : '';
 
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const textAreaClassName = classNames(
     prefixCls,
@@ -126,6 +126,7 @@ const Editable: React.FC<EditableProps> = (props) => {
     className,
     textClassName,
     hashId,
+    cssVarCls,
   );
 
   return wrapCSSVar(
diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx
index 54e2844f50..b613c1139d 100644
--- a/components/typography/Typography.tsx
+++ b/components/typography/Typography.tsx
@@ -64,7 +64,7 @@ const Typography = React.forwardRef<
   const prefixCls = getPrefixCls('typography', customizePrefixCls);
 
   // Style
-  const [wrapCSSVar, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const componentClassName = classNames(
     prefixCls,
@@ -75,6 +75,7 @@ const Typography = React.forwardRef<
     className,
     rootClassName,
     hashId,
+    cssVarCls,
   );
 
   const mergedStyle: React.CSSProperties = { ...typography?.style, ...style };
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 55a6fe5d25..c966fe3b96 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -364,7 +364,7 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
   }
 
   const wrapperCls = `${prefixCls}-wrapper`;
-  const [wrapCSSVar, hashId] = useStyle(prefixCls, wrapperCls);
+  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, wrapperCls);
 
   const [contextLocale] = useLocale('Upload', defaultLocale.Upload);
 
@@ -412,11 +412,19 @@ const InternalUpload: React.ForwardRefRenderFunction<UploadRef, UploadProps> = (
     );
   };
 
-  const mergedCls = classNames(wrapperCls, className, rootClassName, hashId, ctxUpload?.className, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-    [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
-    [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
-  });
+  const mergedCls = classNames(
+    wrapperCls,
+    className,
+    rootClassName,
+    hashId,
+    cssVarCls,
+    ctxUpload?.className,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card',
+      [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle',
+    },
+  );
 
   const mergedStyle: React.CSSProperties = { ...ctxUpload?.style, ...style };
 
diff --git a/scripts/visual-regression/build.ts b/scripts/visual-regression/build.ts
index 62bdedd209..fdb2b88a20 100644
--- a/scripts/visual-regression/build.ts
+++ b/scripts/visual-regression/build.ts
@@ -140,14 +140,14 @@ function generateReport(
 
   const htmlReportLink = `${publicPath}/visualRegressionReport/report.html`;
 
-  const addonFullReportDesc = `\n\nToo many visual-regression diffs found, please check [Full Report](${htmlReportLink}) for details`;
+  const addonFullReportDesc = `\n\nToo many visual-regression diffs found, please check <a href="${htmlReportLink}" target="_blank">Full Report</a> for details`;
 
   // github action pr comment has limit of 65536 4-byte unicode characters
   const limit = 65536 - addonFullReportDesc.length;
 
   let reportMdStr = `
 ${commonHeader}
-> [View Full Report](${htmlReportLink})\n
+> <a href="${htmlReportLink}" target="_blank">View Full Report</a> \n
 ------------------------
 | image name | expected | actual | diff |
 | --- | --- | --- | --- |