diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx
index 884e7cac43..6bfb669deb 100644
--- a/components/badge/Badge.tsx
+++ b/components/badge/Badge.tsx
@@ -222,6 +222,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
     const statusTextColor = mergedStyle.color;
     return (
       <span
+        ref={ref}
         {...restProps}
         className={badgeClassName}
         style={{ ...mergedStyles.root, ...mergedStyle }}
diff --git a/components/badge/__tests__/index.test.tsx b/components/badge/__tests__/index.test.tsx
index 88986695ba..a210abdeba 100644
--- a/components/badge/__tests__/index.test.tsx
+++ b/components/badge/__tests__/index.test.tsx
@@ -240,4 +240,10 @@ describe('Badge', () => {
     rerender(<Badge count={0} showZero color="#ff0" />);
     expect(container.querySelectorAll('[title="0"]')).toHaveLength(1);
   });
+
+  it('should support ref when exist status & text', () => {
+    const badgeRef = React.createRef<HTMLSpanElement>();
+    const { container } = render(<Badge ref={badgeRef} status="success" text="Success" />);
+    expect(badgeRef.current).toBe(container.querySelector('.ant-badge'));
+  });
 });
diff --git a/components/button/style/variant.ts b/components/button/style/variant.ts
index 4663279320..3c0dda45ff 100644
--- a/components/button/style/variant.ts
+++ b/components/button/style/variant.ts
@@ -6,8 +6,7 @@ import type { ButtonToken } from './token';
 const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls, antCls } = token;
 
-  // Default: '--ant-btn-'
-  const getCssVar = genCssVar(antCls, 'btn');
+  const [varName, varRef] = genCssVar(antCls, 'btn');
 
   return {
     [componentCls]: [
@@ -16,54 +15,58 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
       // ==============================================================
       {
         // Border
-        [getCssVar('border-width')]: '1px',
+        [varName`border-width`]: '1px',
 
-        [getCssVar('border-color')]: '#000',
-        [getCssVar('border-color-hover')]: `var(${getCssVar('border-color')})`,
-        [getCssVar('border-color-active')]: `var(${getCssVar('border-color')})`,
-        [getCssVar('border-color-disabled')]: `var(${getCssVar('border-color')})`,
+        [varName`border-color`]: '#000',
+        [varName`border-color-hover`]: varRef`border-color`,
+        [varName`border-color-active`]: varRef`border-color`,
+        [varName`border-color-disabled`]: varRef`border-color`,
 
-        [getCssVar('border-style')]: 'solid',
+        [varName`border-style`]: 'solid',
 
         // Text
-        [getCssVar('text-color')]: '#000',
-        [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
-        [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
-        [getCssVar('text-color-disabled')]: `var(${getCssVar('text-color')})`,
+        [varName`text-color`]: '#000',
+        [varName`text-color-hover`]: varRef`text-color`,
+        [varName`text-color-active`]: varRef`text-color`,
+        [varName`text-color-disabled`]: varRef`text-color`,
 
         // Background
-        [getCssVar('bg-color')]: '#ddd',
-        [getCssVar('bg-color-hover')]: `var(${getCssVar('bg-color')})`,
-        [getCssVar('bg-color-active')]: `var(${getCssVar('bg-color')})`,
-        [getCssVar('bg-color-disabled')]: token.colorBgContainerDisabled,
-        [getCssVar('bg-color-container')]: token.colorBgContainer,
+        [varName`bg-color`]: '#ddd',
+        [varName`bg-color-hover`]: varRef`bg-color`,
+        [varName`bg-color-active`]: varRef`bg-color`,
+        [varName`bg-color-disabled`]: token.colorBgContainerDisabled,
+        [varName`bg-color-container`]: token.colorBgContainer,
 
         // Shadow
-        [getCssVar('shadow')]: 'none',
+        [varName`shadow`]: 'none',
       },
       // ==============================================================
       // ==                         Template                         ==
       // ==============================================================
       {
         // Basic
-        border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color')})`,
-        color: `var(${getCssVar('text-color')})`,
-        backgroundColor: `var(${getCssVar('bg-color')})`,
+        border: [varRef`border-width`, varRef`border-style`, varRef`border-color`].join(' '),
+        color: varRef`text-color`,
+        backgroundColor: varRef`bg-color`,
 
         // Status
         [`&:not(:disabled):not(${componentCls}-disabled)`]: {
           // Hover
           '&:hover': {
-            border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color-hover')})`,
-            color: `var(${getCssVar('text-color-hover')})`,
-            backgroundColor: `var(${getCssVar('bg-color-hover')})`,
+            border: [varRef`border-width`, varRef`border-style`, varRef`border-color-hover`].join(
+              ' ',
+            ),
+            color: varRef`text-color-hover`,
+            backgroundColor: varRef`bg-color-hover`,
           },
 
           // Active
           '&:active': {
-            border: `var(${getCssVar('border-width')}) var(${getCssVar('border-style')}) var(${getCssVar('border-color-active')})`,
-            color: `var(${getCssVar('text-color-active')})`,
-            backgroundColor: `var(${getCssVar('bg-color-active')})`,
+            border: [varRef`border-width`, varRef`border-style`, varRef`border-color-active`].join(
+              ' ',
+            ),
+            color: varRef`text-color-active`,
+            backgroundColor: varRef`bg-color-active`,
           },
         },
       },
@@ -75,67 +78,65 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
         // >>>>> Solid
         [`&${componentCls}-variant-solid`]: {
           // Solid Variables
-          [getCssVar('solid-bg-color')]: `var(${getCssVar('color-base')})`,
-          [getCssVar('solid-bg-color-hover')]: `var(${getCssVar('color-hover')})`,
-          [getCssVar('solid-bg-color-active')]: `var(${getCssVar('color-active')})`,
+          [varName`solid-bg-color`]: varRef`color-base`,
+          [varName`solid-bg-color-hover`]: varRef`color-hover`,
+          [varName`solid-bg-color-active`]: varRef`color-active`,
 
           // Variables
-          [getCssVar('border-color')]: 'transparent',
+          [varName`border-color`]: 'transparent',
 
-          [getCssVar('text-color')]: token.colorTextLightSolid,
+          [varName`text-color`]: token.colorTextLightSolid,
 
-          [getCssVar('bg-color')]: `var(${getCssVar('solid-bg-color')})`,
-          [getCssVar('bg-color-hover')]: `var(${getCssVar('solid-bg-color-hover')})`,
-          [getCssVar('bg-color-active')]: `var(${getCssVar('solid-bg-color-active')})`,
+          [varName`bg-color`]: varRef`solid-bg-color`,
+          [varName`bg-color-hover`]: varRef`solid-bg-color-hover`,
+          [varName`bg-color-active`]: varRef`solid-bg-color-active`,
 
           // Box Shadow
-          boxShadow: `var(${getCssVar('shadow')})`,
+          boxShadow: varRef`shadow`,
         },
 
         // >>>>> Outlined & Dashed
         [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
-          [getCssVar('border-color')]: `var(${getCssVar('color-base')})`,
-          [getCssVar('border-color-hover')]: `var(${getCssVar('color-hover')})`,
-          [getCssVar('border-color-active')]: `var(${getCssVar('color-active')})`,
+          [varName`border-color`]: varRef`color-base`,
+          [varName`border-color-hover`]: varRef`color-hover`,
+          [varName`border-color-active`]: varRef`color-active`,
 
-          [getCssVar('bg-color')]: `var(${getCssVar('bg-color-container')})`,
-
-          [getCssVar('text-color')]: `var(${getCssVar('color-base')})`,
-          [getCssVar('text-color-hover')]: `var(${getCssVar('color-hover')})`,
-          [getCssVar('text-color-active')]: `var(${getCssVar('color-active')})`,
+          [varName`bg-color`]: varRef`bg-color-container`,
+          [varName`text-color`]: varRef`color-base`,
+          [varName`text-color-hover`]: varRef`color-hover`,
+          [varName`text-color-active`]: varRef`color-active`,
 
           // Box Shadow
-          boxShadow: `var(${getCssVar('shadow')})`,
+          boxShadow: varRef`shadow`,
         },
 
         // >>>>> Dashed
         [`&${componentCls}-variant-dashed`]: {
-          [getCssVar('border-style')]: 'dashed',
-          [getCssVar('bg-color-disabled')]: token.dashedBgDisabled,
+          [varName`border-style`]: 'dashed',
+          [varName`bg-color-disabled`]: token.dashedBgDisabled,
         },
 
         // >>>>> Filled
         [`&${componentCls}-variant-filled`]: {
-          [getCssVar('border-color')]: 'transparent',
+          [varName`border-color`]: 'transparent',
 
-          [getCssVar('text-color')]: `var(${getCssVar('color-base')})`,
+          [varName`text-color`]: varRef`color-base`,
 
-          [getCssVar('bg-color')]: `var(${getCssVar('color-light')})`,
-          [getCssVar('bg-color-hover')]: `var(${getCssVar('color-light-hover')})`,
-          [getCssVar('bg-color-active')]: `var(${getCssVar('color-light-active')})`,
+          [varName`bg-color`]: varRef`color-light`,
+          [varName`bg-color-hover`]: varRef`color-light-hover`,
+          [varName`bg-color-active`]: varRef`color-light-active`,
         },
 
         // >>>>> Text & Link
         [`&${componentCls}-variant-text, &${componentCls}-variant-link`]: {
-          [getCssVar('border-color')]: 'transparent',
+          [varName`border-color`]: 'transparent',
 
-          [getCssVar('text-color')]: `var(${getCssVar('color-base')})`,
-          [getCssVar('text-color-hover')]: `var(${getCssVar('color-hover')})`,
-          [getCssVar('text-color-active')]: `var(${getCssVar('color-active')})`,
-
-          [getCssVar('bg-color')]: 'transparent',
-          [getCssVar('bg-color-hover')]: 'transparent',
-          [getCssVar('bg-color-active')]: 'transparent',
+          [varName`text-color`]: varRef`color-base`,
+          [varName`text-color-hover`]: varRef`color-hover`,
+          [varName`text-color-active`]: varRef`color-active`,
+          [varName`bg-color`]: 'transparent',
+          [varName`bg-color-hover`]: 'transparent',
+          [varName`bg-color-active`]: 'transparent',
 
           [`&:disabled, &${token.componentCls}-disabled`]: {
             background: 'transparent',
@@ -145,8 +146,8 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
 
         // >>>>> Text
         [`&${componentCls}-variant-text`]: {
-          [getCssVar('bg-color-hover')]: `var(${getCssVar('color-light')})`,
-          [getCssVar('bg-color-active')]: `var(${getCssVar('color-light-active')})`,
+          [varName`bg-color-hover`]: varRef`color-light`,
+          [varName`bg-color-active`]: varRef`color-light-active`,
         },
       },
 
@@ -157,88 +158,87 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
         // ======================== By Default ========================
         // >>>>> Link
         [`&${componentCls}-variant-link`]: {
-          [getCssVar('color-base')]: token.colorLink,
-          [getCssVar('color-hover')]: token.colorLinkHover,
-          [getCssVar('color-active')]: token.colorLinkActive,
+          [varName`color-base`]: token.colorLink,
+          [varName`color-hover`]: token.colorLinkHover,
+          [varName`color-active`]: token.colorLinkActive,
         },
 
         // ======================== Compatible ========================
         // >>>>> Primary
         [`&${componentCls}-color-primary`]: {
-          [getCssVar('color-base')]: token.colorPrimary,
-          [getCssVar('color-hover')]: token.colorPrimaryHover,
-          [getCssVar('color-active')]: token.colorPrimaryActive,
-          [getCssVar('color-light')]: token.colorPrimaryBg,
-          [getCssVar('color-light-hover')]: token.colorPrimaryBgHover,
-          [getCssVar('color-light-active')]: token.colorPrimaryBorder,
+          [varName`color-base`]: token.colorPrimary,
+          [varName`color-hover`]: token.colorPrimaryHover,
+          [varName`color-active`]: token.colorPrimaryActive,
+          [varName`color-light`]: token.colorPrimaryBg,
+          [varName`color-light-hover`]: token.colorPrimaryBgHover,
+          [varName`color-light-active`]: token.colorPrimaryBorder,
 
-          [getCssVar('shadow')]: token.primaryShadow,
+          [varName`shadow`]: token.primaryShadow,
 
           [`&${componentCls}-variant-solid`]: {
-            [getCssVar('text-color')]: token.primaryColor,
-            [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
-            [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
+            [varName`text-color`]: token.primaryColor,
+            [varName`text-color-hover`]: varRef`text-color`,
+            [varName`text-color-active`]: varRef`text-color`,
           },
         },
 
         // >>>>> Danger
         [`&${componentCls}-color-dangerous`]: {
-          [getCssVar('color-base')]: token.colorError,
-          [getCssVar('color-hover')]: token.colorErrorHover,
-          [getCssVar('color-active')]: token.colorErrorActive,
-          [getCssVar('color-light')]: token.colorErrorBg,
-          [getCssVar('color-light-hover')]: token.colorErrorBgFilledHover,
-          [getCssVar('color-light-active')]: token.colorErrorBgActive,
+          [varName`color-base`]: token.colorError,
+          [varName`color-hover`]: token.colorErrorHover,
+          [varName`color-active`]: token.colorErrorActive,
+          [varName`color-light`]: token.colorErrorBg,
+          [varName`color-light-hover`]: token.colorErrorBgFilledHover,
+          [varName`color-light-active`]: token.colorErrorBgActive,
 
-          [getCssVar('shadow')]: token.dangerShadow,
+          [varName`shadow`]: token.dangerShadow,
 
           [`&${componentCls}-variant-solid`]: {
-            [getCssVar('text-color')]: token.dangerColor,
-            [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
-            [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
+            [varName`text-color`]: token.dangerColor,
+            [varName`text-color-hover`]: varRef`text-color`,
+            [varName`text-color-active`]: varRef`text-color`,
           },
         },
 
         // >>>>> Default
         [`&${componentCls}-color-default`]: {
-          [getCssVar('solid-bg-color')]: token.colorBgSolid,
-          [getCssVar('solid-bg-color-hover')]: token.colorBgSolidHover,
-          [getCssVar('solid-bg-color-active')]: token.colorBgSolidActive,
+          [varName`solid-bg-color`]: token.colorBgSolid,
+          [varName`solid-bg-color-hover`]: token.colorBgSolidHover,
+          [varName`solid-bg-color-active`]: token.colorBgSolidActive,
 
-          [getCssVar('color-base')]: token.defaultBorderColor,
-          [getCssVar('color-hover')]: token.defaultHoverBorderColor,
-          [getCssVar('color-active')]: token.defaultActiveBorderColor,
+          [varName`color-base`]: token.defaultBorderColor,
+          [varName`color-hover`]: token.defaultHoverBorderColor,
+          [varName`color-active`]: token.defaultActiveBorderColor,
 
-          [getCssVar('color-light')]: token.colorFillTertiary,
-          [getCssVar('color-light-hover')]: token.colorFillSecondary,
-          [getCssVar('color-light-active')]: token.colorFill,
+          [varName`color-light`]: token.colorFillTertiary,
+          [varName`color-light-hover`]: token.colorFillSecondary,
+          [varName`color-light-active`]: token.colorFill,
 
-          [getCssVar('text-color')]: token.colorText,
-          [getCssVar('text-color-hover')]: token.defaultHoverBorderColor,
-          [getCssVar('text-color-active')]: token.defaultActiveBorderColor,
-
-          [getCssVar('shadow')]: token.defaultShadow,
+          [varName`text-color`]: token.colorText,
+          [varName`text-color-hover`]: token.defaultHoverBorderColor,
+          [varName`text-color-active`]: token.defaultActiveBorderColor,
+          [varName`shadow`]: token.defaultShadow,
 
           [`&${componentCls}-variant-solid`]: {
-            [getCssVar('text-color')]: token.solidTextColor,
-            [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
-            [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
+            [varName`text-color`]: token.solidTextColor,
+            [varName`text-color-hover`]: varRef`text-color`,
+            [varName`text-color-active`]: varRef`text-color`,
           },
 
           [`&${componentCls}-variant-filled, &${componentCls}-variant-text`]: {
-            [getCssVar('text-color-hover')]: `var(${getCssVar('text-color')})`,
-            [getCssVar('text-color-active')]: `var(${getCssVar('text-color')})`,
+            [varName`text-color-hover`]: varRef`text-color`,
+            [varName`text-color-active`]: varRef`text-color`,
           },
 
           [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
-            [getCssVar('bg-color-hover')]: token.defaultHoverBg,
-            [getCssVar('bg-color-active')]: token.defaultActiveBg,
+            [varName`bg-color-hover`]: token.defaultHoverBg,
+            [varName`bg-color-active`]: token.defaultActiveBg,
           },
 
           [`&${componentCls}-background-ghost`]: {
             [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
-              [getCssVar('text-color')]: token.defaultGhostColor,
-              [getCssVar('border-color')]: token.defaultGhostBorderColor,
+              [varName`text-color`]: token.defaultGhostColor,
+              [varName`border-color`]: token.defaultGhostBorderColor,
             },
           },
         },
@@ -257,13 +257,13 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
 
         return {
           [`&${componentCls}-color-${colorKey}`]: {
-            [getCssVar('color-base')]: darkColor,
-            [getCssVar('color-hover')]: hoverColor,
-            [getCssVar('color-active')]: activeColor,
-            [getCssVar('color-light')]: lightColor,
-            [getCssVar('color-light-hover')]: lightHoverColor,
-            [getCssVar('color-light-active')]: lightActiveColor,
-            [getCssVar('shadow')]: shadowColor,
+            [varName`color-base`]: darkColor,
+            [varName`color-hover`]: hoverColor,
+            [varName`color-active`]: activeColor,
+            [varName`color-light`]: lightColor,
+            [varName`color-light-hover`]: lightHoverColor,
+            [varName`color-light-active`]: lightActiveColor,
+            [varName`shadow`]: shadowColor,
           },
         };
       }),
@@ -276,7 +276,7 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
         [`&:disabled, &${token.componentCls}-disabled`]: {
           cursor: 'not-allowed',
           borderColor: token.colorBorderDisabled,
-          background: `var(${getCssVar('bg-color-disabled')})`,
+          background: varRef`bg-color-disabled`,
           color: token.colorTextDisabled,
           boxShadow: 'none',
         },
@@ -288,8 +288,8 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
       {
         // Ghost
         [`&${componentCls}-background-ghost`]: {
-          [getCssVar('bg-color')]: 'transparent',
-          [getCssVar('shadow')]: 'none',
+          [varName`bg-color`]: 'transparent',
+          [varName`shadow`]: 'none',
         },
       },
     ],
diff --git a/components/float-button/style/button.ts b/components/float-button/style/button.ts
index 87eb1ca035..de1c3f6713 100644
--- a/components/float-button/style/button.ts
+++ b/components/float-button/style/button.ts
@@ -8,8 +8,7 @@ import { genCssVar } from '../../theme/util/genStyleUtils';
 const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
   const { componentCls, floatButtonSize, iconCls, antCls, floatButtonIconSize } = token;
 
-  // Default: '--ant-float-btn-'
-  const getCssVar = genCssVar(antCls, 'float-btn');
+  const [varName, varRef] = genCssVar(antCls, 'float-btn');
 
   const badgeCls = `${componentCls}-badge`;
 
@@ -25,7 +24,7 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
       // ==                         Variable                         ==
       // ==============================================================
       {
-        [getCssVar('size')]: unit(floatButtonSize),
+        [varName`size`]: unit(floatButtonSize),
       },
 
       // ==============================================================
@@ -36,8 +35,8 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
         margin: 0,
         padding: `${unit(token.paddingXXS)} 0`,
 
-        width: `var(${getCssVar('size')})`,
-        minHeight: `var(${getCssVar('size')})`,
+        width: varRef`size`,
+        minHeight: varRef`size`,
         height: 'auto',
         wordBreak: 'break-word',
         whiteSpace: 'normal',
diff --git a/components/float-button/style/group.ts b/components/float-button/style/group.ts
index 2a11b1b6bc..4387fb736e 100644
--- a/components/float-button/style/group.ts
+++ b/components/float-button/style/group.ts
@@ -12,8 +12,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
   const groupCls = `${componentCls}-group`;
   const listCls = `${groupCls}-list`;
 
-  // Default: '--ant-float-btn-'
-  const getCssVar = genCssVar(antCls, 'float-btn');
+  const [varName, varRef] = genCssVar(antCls, 'float-btn');
 
   return {
     [groupCls]: [
@@ -21,8 +20,8 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
       // ==                         Variable                         ==
       // ==============================================================
       {
-        [getCssVar('list-transform-start')]: `translate(0,${unit(floatButtonSize)})`,
-        [getCssVar('list-trigger-offset')]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
+        [varName`list-transform-start`]: `translate(0,${unit(floatButtonSize)})`,
+        [varName`list-trigger-offset`]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
       },
 
       // ==============================================================
@@ -81,7 +80,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
 
             '&-enter, &-appear': {
               opacity: 0,
-              transform: getCssVar('list-transform-start', true),
+              transform: varRef`list-transform-start`,
 
               '&-active': {
                 opacity: 1,
@@ -92,7 +91,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
             '&-leave': {
               '&-active': {
                 opacity: 0,
-                transform: getCssVar('list-transform-start', true),
+                transform: varRef`list-transform-start`,
               },
             },
           },
@@ -101,30 +100,28 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
         // ======================== Placements ========================
         '&-top': {
           [listCls]: {
-            bottom: getCssVar('list-trigger-offset', true),
+            bottom: varRef`list-trigger-offset`,
           },
         },
 
         '&-bottom': {
           [listCls]: {
-            [getCssVar('list-transform-start')]:
-              `translate(0, calc(${unit(floatButtonSize)} * -1))`,
-            top: getCssVar('list-trigger-offset', true),
+            [varName`list-transform-start`]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
+            top: varRef`list-trigger-offset`,
           },
         },
 
         '&-left': {
           [listCls]: {
-            [getCssVar('list-transform-start')]: `translate(${unit(floatButtonSize)}, 0)`,
-            right: getCssVar('list-trigger-offset', true),
+            [varName`list-transform-start`]: `translate(${unit(floatButtonSize)}, 0)`,
+            right: varRef`list-trigger-offset`,
           },
         },
 
         '&-right': {
           [listCls]: {
-            [getCssVar('list-transform-start')]:
-              `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
-            left: getCssVar('list-trigger-offset', true),
+            [varName`list-transform-start`]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
+            left: varRef`list-trigger-offset`,
           },
         },
       },
diff --git a/components/pagination/style/index.ts b/components/pagination/style/index.ts
index 16fbfa07ac..7012c0bc69 100644
--- a/components/pagination/style/index.ts
+++ b/components/pagination/style/index.ts
@@ -254,17 +254,16 @@ const genPaginationLargeStyle: GenerateStyle<PaginationToken, CSSObject> = (toke
 const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
-  // Default: '--ant-pagination-'
-  const getCssVar = genCssVar(antCls, 'pagination');
+  const [, varRef] = genCssVar(antCls, 'pagination');
 
   return {
     [`&${componentCls}-simple`]: {
       [`${componentCls}-prev, ${componentCls}-next`]: {
-        height: `var(${getCssVar('item-size-actual')})`,
-        lineHeight: `var(${getCssVar('item-size-actual')})`,
+        height: varRef`item-size-actual`,
+        lineHeight: varRef`item-size-actual`,
         verticalAlign: 'top',
         [`${componentCls}-item-link`]: {
-          height: `var(${getCssVar('item-size-actual')})`,
+          height: varRef`item-size-actual`,
           backgroundColor: 'transparent',
           border: 0,
           '&:hover': {
@@ -274,8 +273,8 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
             backgroundColor: token.colorBgTextActive,
           },
           '&::after': {
-            height: `var(${getCssVar('item-size-actual')})`,
-            lineHeight: `var(${getCssVar('item-size-actual')})`,
+            height: varRef`item-size-actual`,
+            lineHeight: varRef`item-size-actual`,
           },
         },
       },
@@ -283,8 +282,8 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
       [`${componentCls}-simple-pager`]: {
         display: 'inline-flex',
         alignItems: 'center',
-        height: `var(${getCssVar('item-size-actual')})`,
-        marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
+        height: varRef`item-size-actual`,
+        marginInlineEnd: varRef`item-spacing-actual`,
 
         input: {
           boxSizing: 'border-box',
@@ -343,8 +342,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = (tok
 const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
-  // Default: '--ant-pagination-'
-  const getCssVar = genCssVar(antCls, 'pagination');
+  const [, varRef] = genCssVar(antCls, 'pagination');
 
   return {
     [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
@@ -400,7 +398,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
     ${componentCls}-jump-prev,
     ${componentCls}-jump-next
     `]: {
-      marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
+      marginInlineEnd: varRef`item-spacing-actual`,
     },
 
     [`
@@ -410,11 +408,11 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
     ${componentCls}-jump-next
     `]: {
       display: 'inline-block',
-      minWidth: `var(${getCssVar('item-size-actual')})`,
-      height: `var(${getCssVar('item-size-actual')})`,
+      minWidth: varRef`item-size-actual`,
+      height: varRef`item-size-actual`,
       color: token.colorText,
       fontFamily: token.fontFamily,
-      lineHeight: `var(${getCssVar('item-size-actual')})`,
+      lineHeight: varRef`item-size-actual`,
       textAlign: 'center',
       verticalAlign: 'middle',
       listStyle: 'none',
@@ -477,9 +475,9 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
 
       '&-quick-jumper': {
         display: 'inline-block',
-        height: `var(${getCssVar('item-size-actual')})`,
+        height: varRef`item-size-actual`,
         marginInlineStart: token.marginXS,
-        lineHeight: `var(${getCssVar('item-size-actual')})`,
+        lineHeight: varRef`item-size-actual`,
         verticalAlign: 'top',
 
         input: {
@@ -495,11 +493,11 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
           },
 
           width: token.quickJumperInputWidth,
-          height: `var(${getCssVar('item-size-actual')})`,
+          height: varRef`item-size-actual`,
           boxSizing: 'border-box',
           margin: 0,
-          marginInlineStart: `var(${getCssVar('item-spacing-actual')})`,
-          marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
+          marginInlineStart: varRef`item-spacing-actual`,
+          marginInlineEnd: varRef`item-spacing-actual`,
         },
       },
     },
@@ -509,22 +507,16 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = (token
 const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
-  // Default: '--ant-pagination-'
-  const getCssVar = genCssVar(antCls, 'pagination');
+  const [, varRef] = genCssVar(antCls, 'pagination');
 
   return {
     [`${componentCls}-item`]: {
       display: 'inline-block',
-      minWidth: `var(${getCssVar('item-size-actual')})`,
-      height: `var(${getCssVar('item-size-actual')})`,
-      marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
+      minWidth: varRef`item-size-actual`,
+      height: varRef`item-size-actual`,
+      marginInlineEnd: varRef`item-spacing-actual`,
       fontFamily: token.fontFamily,
-      lineHeight: unit(
-        token
-          .calc(`var(${getCssVar('item-size-actual')})`)
-          .sub(2)
-          .equal(),
-      ),
+      lineHeight: unit(token.calc(varRef`item-size-actual`).sub(2).equal()),
       textAlign: 'center',
       verticalAlign: 'middle',
       listStyle: 'none',
@@ -580,20 +572,19 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = (token
 const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) => {
   const { componentCls, antCls } = token;
 
-  // Default: '--ant-pagination-'
-  const getCssVar = genCssVar(antCls, 'pagination');
+  const [varName, varRef] = genCssVar(antCls, 'pagination');
 
   return {
     [componentCls]: {
-      [getCssVar('item-size-actual')]: unit(token.itemSize),
-      [getCssVar('item-spacing-actual')]: unit(token.marginXS),
+      [varName`item-size-actual`]: unit(token.itemSize),
+      [varName`item-spacing-actual`]: unit(token.marginXS),
       '&-small': {
-        [getCssVar('item-size-actual')]: unit(token.itemSizeSM),
-        [getCssVar('item-spacing-actual')]: unit(token.marginXXS),
+        [varName`item-size-actual`]: unit(token.itemSizeSM),
+        [varName`item-spacing-actual`]: unit(token.marginXXS),
       },
       '&-large': {
-        [getCssVar('item-size-actual')]: unit(token.itemSizeLG),
-        [getCssVar('item-spacing-actual')]: unit(token.marginSM),
+        [varName`item-size-actual`]: unit(token.itemSizeLG),
+        [varName`item-spacing-actual`]: unit(token.marginSM),
       },
 
       ...resetComponent(token),
@@ -628,14 +619,9 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = (token) =>
 
       [`${componentCls}-total-text`]: {
         display: 'inline-block',
-        height: `var(${getCssVar('item-size-actual')})`,
-        marginInlineEnd: `var(${getCssVar('item-spacing-actual')})`,
-        lineHeight: unit(
-          token
-            .calc(`var(${getCssVar('item-size-actual')})`)
-            .sub(2)
-            .equal(),
-        ),
+        height: varRef`item-size-actual`,
+        marginInlineEnd: varRef`item-spacing-actual`,
+        lineHeight: unit(token.calc(varRef`item-size-actual`).sub(2).equal()),
         verticalAlign: 'middle',
       },
 
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 1b173ecad8..535a34ea96 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -169,7 +169,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 ## FAQ
 
-### Why sometime search will show 2 same option when in `tags` mode? {#faq-tags-mode-duplicate}
+### Why sometimes search will show 2 same option when in `tags` mode? {#faq-tags-mode-duplicate}
 
 It's caused by option with different `label` and `value`. You can use `optionFilterProp="label"` to change filter logic instead.
 
@@ -196,7 +196,7 @@ Select will close when it lose focus. You can prevent event to handle this:
 />
 ```
 
-### Why sometime customize Option cause scroll break? {#faq-custom-option-scroll}
+### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll}
 
 Virtual scroll internal set item height as `24px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height:
 
diff --git a/components/select/style/select-input.ts b/components/select/style/select-input.ts
index 3c55f39f72..2515119193 100644
--- a/components/select/style/select-input.ts
+++ b/components/select/style/select-input.ts
@@ -231,6 +231,10 @@ const genSelectInputStyle: GenerateStyle<SelectToken> = (token) => {
           '--select-height': token.controlHeightSM,
           '--select-padding-horizontal': calc(token.paddingXS).sub(token.lineWidth).equal(),
           '--select-border-radius': token.borderRadiusSM,
+
+          [`${componentCls}-clear`]: {
+            insetInlineEnd: 'var(--select-padding-horizontal)',
+          },
         },
 
         '&-lg': {
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index 457f57e578..471e60fe10 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -393,7 +393,7 @@ Table can not tell what state used in `columns.render`, so it always need fully
 
 ### How to handle fixed column display over the mask layout? {#faq-fixed-column-zindex}
 
-Fixed column use `z-index` to make it over other columns. You will find sometime fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.
+Fixed column use `z-index` to make it over other columns. You will find sometimes fixed columns also over your mask layout. You can set `z-index` on your mask layout to resolve.
 
 ### How to custom render Table Checkbox（For example, adding Tooltip）? {#faq-custom-checkbox-render}
 
diff --git a/components/theme/util/genStyleUtils.ts b/components/theme/util/genStyleUtils.ts
index 34e905086a..9088893aad 100644
--- a/components/theme/util/genStyleUtils.ts
+++ b/components/theme/util/genStyleUtils.ts
@@ -42,11 +42,15 @@ export const { genStyleHooks, genComponentStyleHook, genSubStyleComponent } = ge
   getCompUnitless: (() => unitless) as GetCompUnitless<ComponentTokenMap, AliasToken>,
 });
 
-export const genCssVar = (antCls: string, componentAbbr: string) => {
-  const cssPrefix = `--${antCls.replace('.', '')}-${componentAbbr}-`;
-
-  return (name: string, withVar = false) => {
-    const raw = `${cssPrefix}${name}`;
-    return withVar ? `var(${raw})` : raw;
-  };
+export const genCssVar = (
+  antCls: string,
+  componentAbbr: string,
+): readonly [
+  varName: (inputs: TemplateStringsArray) => string,
+  varRef: (inputs: TemplateStringsArray) => string,
+] => {
+  const cssPrefix = `--${antCls.replace(/\./, '')}-${componentAbbr}-`;
+  const varName = (inputs: TemplateStringsArray) => `${cssPrefix}${inputs[0]}`;
+  const varRef = (inputs: TemplateStringsArray) => `var(${cssPrefix}${inputs[0]})`;
+  return [varName, varRef] as const;
 };
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index 462eb09f27..81532c21f3 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -145,7 +145,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 We don't provide this since performance consideration. You can get by this way: <https://codesandbox.io/s/get-parent-node-in-onchange-eb1608>
 
-### Why sometime customize Option cause scroll break? {#faq-custom-option-scroll}
+### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll}
 
 You can ref Select [FAQ](/components/select).