diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx
index f4d1ca0e08..0de0bb184c 100644
--- a/components/alert/style/index.tsx
+++ b/components/alert/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/anchor/style/index.tsx b/components/anchor/style/index.tsx
index e61f8089ac..07ab3a2d49 100644
--- a/components/anchor/style/index.tsx
+++ b/components/anchor/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/avatar/style/index.tsx b/components/avatar/style/index.tsx
index 4214d99ade..be2ff83ff5 100644
--- a/components/avatar/style/index.tsx
+++ b/components/avatar/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/back-top/style/index.tsx b/components/back-top/style/index.tsx
index f28334fcee..d6c0625f39 100644
--- a/components/back-top/style/index.tsx
+++ b/components/back-top/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx
index f1dbce6755..b0f26fb513 100644
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle, PresetColorType } from '../../theme';
-import { genComponentStyleHook, mergeToken, PresetColors, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface BadgeToken extends FullToken<'Badge'> {
   badgeFontHeight: number;
diff --git a/components/breadcrumb/style/index.tsx b/components/breadcrumb/style/index.tsx
index 07471109d9..5026fab7c1 100644
--- a/components/breadcrumb/style/index.tsx
+++ b/components/breadcrumb/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface BreadcrumbToken extends FullToken<'Breadcrumb'> {
   breadcrumbBaseColor: string;
diff --git a/components/calendar/style/index.tsx b/components/calendar/style/index.tsx
index 719d55297b..da9377cb81 100644
--- a/components/calendar/style/index.tsx
+++ b/components/calendar/style/index.tsx
@@ -1,10 +1,11 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { PickerPanelToken } from '../../date-picker/style';
 import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style';
 import type { InputToken } from '../../input/style';
 import { initInputToken } from '../../input/style';
 import type { FullToken } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 
 export interface ComponentToken {
   yearControlWidth: number;
diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx
index 612fd4cf5d..947fa48121 100644
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { clearFix, resetComponent } from '../../style';
 
 interface CardToken extends FullToken<'Card'> {
   cardShadow: string;
diff --git a/components/carousel/style/index.tsx b/components/carousel/style/index.tsx
index d0e3605708..2972ec9fa5 100644
--- a/components/carousel/style/index.tsx
+++ b/components/carousel/style/index.tsx
@@ -1,5 +1,6 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   dotWidth: number;
diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index c02df639b0..9c88082bb1 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -1,6 +1,7 @@
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/collapse/style/index.tsx b/components/collapse/style/index.tsx
index 67e74b6c3b..bef7ddd3a6 100644
--- a/components/collapse/style/index.tsx
+++ b/components/collapse/style/index.tsx
@@ -1,5 +1,6 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent, resetIcon } from '../../style';
 
 type CollapseToken = FullToken<'Collapse'> & {
   collapseContentBg: string;
diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
index 31691bde8b..4d1abaee5e 100644
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@@ -9,9 +9,10 @@ import {
 } from '../../input/style';
 import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, roundedArrow } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import type { GlobalToken } from '../../theme/interface';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+import { resetComponent, roundedArrow } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/descriptions/style/index.tsx b/components/descriptions/style/index.tsx
index 0e2dede9ba..c17218f108 100644
--- a/components/descriptions/style/index.tsx
+++ b/components/descriptions/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface DescriptionsToken extends FullToken<'Descriptions'> {
   descriptionsTitleMarginBottom: number;
diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx
index 05840c6cf2..31257ba4ff 100644
--- a/components/divider/style/index.tsx
+++ b/components/divider/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
diff --git a/components/dropdown/style/index.tsx b/components/dropdown/style/index.tsx
index 44da3ca5a2..1ecc24b5c0 100644
--- a/components/dropdown/style/index.tsx
+++ b/components/dropdown/style/index.tsx
@@ -7,9 +7,10 @@ import {
   slideUpOut,
 } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, roundedArrow } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genButtonStyle from './button';
 import genStatusStyle from './status';
+import { resetComponent, roundedArrow } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/form/style/index.tsx b/components/form/style/index.tsx
index 792b489b12..5d6796a254 100644
--- a/components/form/style/index.tsx
+++ b/components/form/style/index.tsx
@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface FormToken extends FullToken<'Form'> {
   formItemCls: string;
diff --git a/components/image/style/index.tsx b/components/image/style/index.tsx
index 6a346ce41f..53a8c16184 100644
--- a/components/image/style/index.tsx
+++ b/components/image/style/index.tsx
@@ -3,7 +3,8 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { genModalMaskStyle } from '../../modal/style';
 import { initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx
index de0bf2559b..6409db2ef1 100644
--- a/components/input-number/style/index.tsx
+++ b/components/input-number/style/index.tsx
@@ -10,7 +10,8 @@ import {
   initInputToken,
 } from '../../input/style';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, resetComponent, resetIcon } from '../../theme';
+import { genComponentStyleHook } from '../../theme';
+import { resetComponent, resetIcon } from '../../style';
 
 export interface ComponentToken {
   controlWidth: number;
diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx
index 4753ecdf63..12222aa096 100644
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import type { GlobalToken } from '../../theme/interface';
+import { clearFix, resetComponent } from '../../style';
 
 export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
   inputAffixPadding: number;
diff --git a/components/list/style/index.tsx b/components/list/style/index.tsx
index 3a4f6e1dbe..1686e1d9c2 100644
--- a/components/list/style/index.tsx
+++ b/components/list/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   contentWidth: number;
diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx
index 656b7ec177..11b19394e1 100644
--- a/components/mentions/style/index.tsx
+++ b/components/mentions/style/index.tsx
@@ -8,7 +8,8 @@ import {
   initInputToken,
 } from '../../input/style';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, resetComponent } from '../../theme';
+import { genComponentStyleHook } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index f9f6289c2a..1f76abb81d 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -1,16 +1,11 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme';
-import {
-  clearFix,
-  genComponentStyleHook,
-  mergeToken,
-  resetComponent,
-  resetIcon,
-} from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import getHorizontalStyle from './horizontal';
 import getRTLStyle from './rtl';
 import getThemeStyle from './theme';
 import getVerticalStyle from './vertical';
+import { clearFix, resetComponent, resetIcon } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx
index 5b9f0feba2..f3f1e51064 100644
--- a/components/message/style/index.tsx
+++ b/components/message/style/index.tsx
@@ -1,7 +1,8 @@
 // deps-lint-skip-all
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
index 9a9a08604e..9661aa6da4 100644
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -1,8 +1,9 @@
 import type React from 'react';
 import { initFadeMotion, initZoomMotion } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
+import { clearFix, resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx
index d71a2ccd86..84fa3c019e 100644
--- a/components/notification/style/index.tsx
+++ b/components/notification/style/index.tsx
@@ -1,7 +1,8 @@
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genNotificationPlacementStyle from './placement';
+import { resetComponent } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx
index e301fc20c0..d93fe0e099 100644
--- a/components/pagination/style/index.tsx
+++ b/components/pagination/style/index.tsx
@@ -6,7 +6,8 @@ import {
   type InputToken,
 } from '../../input/style';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
   paginationItemSize: number;
diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx
index fc2e3a5594..80d891c1fa 100644
--- a/components/popover/style/index.tsx
+++ b/components/popover/style/index.tsx
@@ -1,12 +1,8 @@
 import { initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, PresetColorType } from '../../theme';
-import {
-  genComponentStyleHook,
-  getArrowStyle,
-  mergeToken,
-  PresetColors,
-  resetComponent,
-} from '../../theme';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
+import { resetComponent } from '../../style';
+import getArrowStyle from '../../style/placementArrow';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/progress/style/index.tsx b/components/progress/style/index.tsx
index 1c49ee3ccd..913974bcab 100644
--- a/components/progress/style/index.tsx
+++ b/components/progress/style/index.tsx
@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx
index 25963c1c4b..45760ac4dd 100644
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@@ -1,6 +1,7 @@
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 // ============================== Tokens ==============================
 export interface ComponentToken {}
diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx
index c24a145f03..83dedcc560 100644
--- a/components/rate/style/index.tsx
+++ b/components/rate/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export type ComponentToken = {};
 
diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx
index 8f6edb44b6..f81aadabca 100644
--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   // FIXME: need to be removed
diff --git a/components/select/style/dropdown.tsx b/components/select/style/dropdown.tsx
index 584849b2f4..ced020ff30 100644
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@@ -9,7 +9,7 @@ import {
   slideUpOut,
 } from '../../style/motion';
 import type { GenerateStyle } from '../../theme';
-import { resetComponent } from '../../theme';
+import { resetComponent } from '../../style';
 
 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
   const { controlPaddingHorizontal } = token;
diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx
index 759ab8f03e..37a4197cc4 100644
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@@ -1,9 +1,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent, resetIcon } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genDropdownStyle from './dropdown';
 import genMultipleStyle from './multiple';
 import genSingleStyle from './single';
+import { resetComponent, resetIcon } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx
index aa3cd302fa..bc8fb7469f 100644
--- a/components/select/style/multiple.tsx
+++ b/components/select/style/multiple.tsx
@@ -1,6 +1,7 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';
-import { mergeToken, resetIcon } from '../../theme';
+import { mergeToken } from '../../theme';
+import { resetIcon } from '../../style';
 
 const FIXED_ITEM_MARGIN = 2;
 
diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
index 8fbe318ee3..bc462bf3bf 100644
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@@ -2,7 +2,8 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import type * as React from 'react';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 // Direction naming standard:
 // Horizontal base:
diff --git a/components/spin/style/index.tsx b/components/spin/style/index.tsx
index ffcdbb83c1..967a10e382 100644
--- a/components/spin/style/index.tsx
+++ b/components/spin/style/index.tsx
@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   contentHeight: number;
diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx
index 4f82659401..0d37c0fb4b 100644
--- a/components/statistic/style/index.tsx
+++ b/components/statistic/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface StatisticToken extends FullToken<'Statistic'> {
   statisticTitleFontSize: number;
diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx
index 3901128dd9..21c4fd12d7 100644
--- a/components/steps/style/index.tsx
+++ b/components/steps/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genStepsCustomIconStyle from './custom-icon';
 import genStepsLabelPlacementStyle from './label-placement';
 import genStepsNavStyle from './nav';
@@ -9,6 +9,7 @@ import genStepsProgressDotStyle from './progress-dot';
 import genStepsRTLStyle from './rtl';
 import genStepsSmallStyle from './small';
 import genStepsVerticalStyle from './vertical';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   descriptionWidth: number;
diff --git a/components/theme/util/index.tsx b/components/style/index.tsx
similarity index 60%
rename from components/theme/util/index.tsx
rename to components/style/index.tsx
index f2ff78a22c..dca5511022 100644
--- a/components/theme/util/index.tsx
+++ b/components/style/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '..';
+import type { DerivativeToken } from '../theme';
 
 export { operationUnit } from './operationUnit';
 export { roundedArrow } from './roundedArrow';
@@ -15,9 +15,6 @@ export const resetComponent = (token: DerivativeToken): CSSObject => ({
   lineHeight: token.lineHeight,
   listStyle: 'none',
   // font-feature-settings: @font-feature-settings-base;
-  a: {
-    textDecoration: 'none',
-  },
 });
 
 export const resetIcon = (): CSSObject => ({
@@ -61,3 +58,40 @@ export const clearFix = (): CSSObject => ({
     content: '""',
   },
 });
+
+export const genLinkStyle = (token: DerivativeToken): CSSObject => ({
+  a: {
+    color: token.colorLink,
+    textDecoration: token.linkDecoration,
+    backgroundColor: 'transparent', // remove the gray background on active links in IE 10.
+    outline: 'none',
+    cursor: 'pointer',
+    transition: `color ${token.motionDurationSlow}`,
+    '-webkit-text-decoration-skip': 'objects', // remove gaps in links underline in iOS 8+ and Safari 8+.
+
+    '&:hover': {
+      color: token.colorLinkHover,
+    },
+
+    '&:active': {
+      color: token.colorLinkActive,
+    },
+
+    [`&:active,
+  &:hover`]: {
+      textDecoration: token.linkHoverDecoration,
+      outline: 0,
+    },
+
+    // https://github.com/ant-design/ant-design/issues/22503
+    '&:focus': {
+      textDecoration: token.linkFocusDecoration,
+      outline: 0,
+    },
+
+    '&[disabled]': {
+      color: token.colorTextDisabled,
+      cursor: 'not-allowed',
+    },
+  },
+});
diff --git a/components/theme/util/operationUnit.tsx b/components/style/operationUnit.tsx
similarity index 92%
rename from components/theme/util/operationUnit.tsx
rename to components/style/operationUnit.tsx
index ba164ca616..159be14fde 100644
--- a/components/theme/util/operationUnit.tsx
+++ b/components/style/operationUnit.tsx
@@ -1,5 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '..';
+import type { DerivativeToken } from '../theme';
 
 // eslint-disable-next-line import/prefer-default-export
 export const operationUnit = (token: DerivativeToken): CSSObject => ({
diff --git a/components/theme/util/placementArrow.tsx b/components/style/placementArrow.tsx
similarity index 97%
rename from components/theme/util/placementArrow.tsx
rename to components/style/placementArrow.tsx
index f7402ad3a1..38c5d2ae79 100644
--- a/components/theme/util/placementArrow.tsx
+++ b/components/style/placementArrow.tsx
@@ -1,6 +1,6 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
-import type { AliasToken } from '../interface';
-import type { TokenWithCommonCls } from './genComponentStyleHook';
+import type { AliasToken } from '../theme';
+import type { TokenWithCommonCls } from '../theme/util/genComponentStyleHook';
 import { roundedArrow } from './roundedArrow';
 
 function connectArrowCls(classList: string[], showArrowCls: string = '') {
diff --git a/components/theme/util/roundedArrow.tsx b/components/style/roundedArrow.tsx
similarity index 94%
rename from components/theme/util/roundedArrow.tsx
rename to components/style/roundedArrow.tsx
index c7610c056b..9603bf6ce4 100644
--- a/components/theme/util/roundedArrow.tsx
+++ b/components/style/roundedArrow.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import type { CSSObject } from '@ant-design/cssinjs';
-import seedToken from '../themes/seed';
 
 export const roundedArrow = (width: number, outerRadius: number, bgColor: string): CSSObject => {
   const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2));
-  const { radiusBase } = seedToken;
+  const radiusBase = 2;
 
   const ax = width - cornerHeight;
   const ay = 2 * width + cornerHeight;
diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx
index a1706ca3dc..ddbb6b3f75 100644
--- a/components/switch/style/index.tsx
+++ b/components/switch/style/index.tsx
@@ -1,7 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 interface SwitchToken extends FullToken<'Switch'> {
   switchMinWidth: number;
diff --git a/components/table/style/expand.tsx b/components/table/style/expand.tsx
index 70cf9f5c67..2954b54c92 100644
--- a/components/table/style/expand.tsx
+++ b/components/table/style/expand.tsx
@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme';
-import { operationUnit } from '../../theme';
 import type { TableToken } from './index';
+import { operationUnit } from '../../style';
 
 const genExpandStyle: GenerateStyle<TableToken, CSSObject> = token => {
   const {
diff --git a/components/table/style/filter.tsx b/components/table/style/filter.tsx
index f98b6c4488..294490a556 100644
--- a/components/table/style/filter.tsx
+++ b/components/table/style/filter.tsx
@@ -1,9 +1,8 @@
-import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type { GenerateStyle } from '../../theme';
-import { resetComponent } from '../../theme';
 import type { TableToken } from './index';
+import { resetComponent } from '../../style';
 
-const genFilterStyle: GenerateStyle<TableToken, CSSInterpolation> = token => {
+const genFilterStyle: GenerateStyle<TableToken> = token => {
   const {
     componentCls,
     antCls,
diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx
index 8517a17f52..667427d082 100644
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genBorderedStyle from './bordered';
 import genEllipsisStyle from './ellipsis';
 import genEmptyStyle from './empty';
@@ -16,6 +16,7 @@ import genSizeStyle from './size';
 import genSorterStyle from './sorter';
 import genStickyStyle from './sticky';
 import genSummaryStyle from './summary';
+import { clearFix, resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/tabs/style/index.tsx b/components/tabs/style/index.tsx
index 8c15c39607..8743472f1e 100644
--- a/components/tabs/style/index.tsx
+++ b/components/tabs/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx
index d8dda5f958..6840580647 100644
--- a/components/tag/style/index.tsx
+++ b/components/tag/style/index.tsx
@@ -1,7 +1,9 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import type React from 'react';
 import type { FullToken, PresetColorType } from '../../theme';
-import { genComponentStyleHook, mergeToken, PresetColors, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
 import capitalize from '../../_util/capitalize';
+import { resetComponent } from '../../style';
 
 interface TagToken extends FullToken<'Tag'> {
   tagFontSize: number;
diff --git a/components/theme/index.tsx b/components/theme/index.tsx
index 130ae7221f..175b473516 100644
--- a/components/theme/index.tsx
+++ b/components/theme/index.tsx
@@ -13,22 +13,14 @@ import type {
 import { PresetColors } from './interface';
 import defaultDerivative from './themes/default';
 import defaultSeedToken from './themes/seed';
-import { clearFix, operationUnit, resetComponent, resetIcon, roundedArrow } from './util';
 import formatToken from './util/alias';
 import type { FullToken } from './util/genComponentStyleHook';
 import genComponentStyleHook from './util/genComponentStyleHook';
-import getArrowStyle from './util/placementArrow';
 import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
 
 const defaultTheme = createTheme(defaultDerivative);
 
 export {
-  resetComponent,
-  resetIcon,
-  clearFix,
-  roundedArrow,
-  getArrowStyle,
-  operationUnit,
   // colors
   PresetColors,
   // Statistic
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index 4819a84253..f6df34d4b1 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -2,6 +2,7 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { useContext } from 'react';
+import { genLinkStyle } from '../../style';
 import { ConfigContext } from '../../config-provider/context';
 import type { UseComponentStyleResult } from '../index';
 import { mergeToken, statisticToken, useToken } from '../index';
@@ -74,12 +75,14 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
             mergedComponentToken[key] = overrideComponentToken[key] ?? mergedComponentToken[key];
           });
         }
+
+        const componentCls = `.${prefixCls}`;
         const mergedToken = mergeToken<
           TokenWithCommonCls<GlobalTokenWithComponent<OverrideComponent>>
         >(
           proxyToken,
           {
-            componentCls: `.${prefixCls}`,
+            componentCls,
             prefixCls,
             iconCls: `.${iconPrefixCls}`,
             antCls: `.${rootPrefixCls}`,
@@ -94,7 +97,11 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           iconPrefixCls,
         });
         flush(component, mergedComponentToken);
-        return styleInterpolation;
+        return [
+          // Generate style for all a tags in antd component
+          { [componentCls]: genLinkStyle(token) },
+          styleInterpolation,
+        ];
       }),
       hashId,
     ];
diff --git a/components/timeline/style/index.tsx b/components/timeline/style/index.tsx
index 0665729e67..ff73032b84 100644
--- a/components/timeline/style/index.tsx
+++ b/components/timeline/style/index.tsx
@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/tooltip/style/index.tsx b/components/tooltip/style/index.tsx
index a8a1196370..6cf0e40371 100644
--- a/components/tooltip/style/index.tsx
+++ b/components/tooltip/style/index.tsx
@@ -6,13 +6,9 @@ import type {
   PresetColorType,
   UseComponentStyleResult,
 } from '../../theme';
-import {
-  genComponentStyleHook,
-  getArrowStyle,
-  mergeToken,
-  PresetColors,
-  resetComponent,
-} from '../../theme';
+import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme';
+import { resetComponent } from '../../style';
+import getArrowStyle from '../../style/placementArrow';
 
 export interface ComponentToken {
   zIndexPopup: number;
diff --git a/components/transfer/style/index.tsx b/components/transfer/style/index.tsx
index 093b4ca477..3a92bdeff8 100644
--- a/components/transfer/style/index.tsx
+++ b/components/transfer/style/index.tsx
@@ -1,13 +1,8 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle } from '../../theme';
-import {
-  genComponentStyleHook,
-  mergeToken,
-  operationUnit,
-  resetComponent,
-  resetIcon,
-} from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { operationUnit, resetComponent, resetIcon } from '../../style';
 
 export interface ComponentToken {
   listWidth: number;
diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx
index 9648aa92c9..b409c22185 100644
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@@ -6,7 +6,8 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import type { DerivativeToken } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
+import { resetComponent } from '../../style';
 
 // ============================ Keyframes =============================
 const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
diff --git a/components/typography/style/index.tsx b/components/typography/style/index.tsx
index b4d706fb4e..8d82346013 100644
--- a/components/typography/style/index.tsx
+++ b/components/typography/style/index.tsx
@@ -1,5 +1,5 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, operationUnit } from '../../theme';
+import { genComponentStyleHook } from '../../theme';
 import {
   getCopiableStyles,
   getEditableStyles,
@@ -8,6 +8,7 @@ import {
   getResetStyles,
   getTitleStyles,
 } from './mixins';
+import { operationUnit } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
diff --git a/components/typography/style/mixins.tsx b/components/typography/style/mixins.tsx
index e90195d919..7f8d1450a5 100644
--- a/components/typography/style/mixins.tsx
+++ b/components/typography/style/mixins.tsx
@@ -12,7 +12,7 @@ import type { CSSObject } from '@ant-design/cssinjs';
 import type { TypographyToken } from '.';
 import { initInputToken } from '../../input/style';
 import type { GenerateStyle } from '../../theme';
-import { operationUnit } from '../../theme';
+import { operationUnit } from '../../style';
 
 // eslint-disable-next-line import/prefer-default-export
 const getTitleStyle = (
diff --git a/components/upload/style/index.tsx b/components/upload/style/index.tsx
index 1a6813c2e8..b6fd0512e5 100644
--- a/components/upload/style/index.tsx
+++ b/components/upload/style/index.tsx
@@ -1,10 +1,11 @@
 import type { FullToken, GenerateStyle } from '../../theme';
-import { genComponentStyleHook, mergeToken, resetComponent } from '../../theme';
+import { genComponentStyleHook, mergeToken } from '../../theme';
 import genDraggerStyle from './dragger';
 import genListStyle from './list';
 import genMotionStyle from './motion';
 import { genPictureCardStyle, genPictureStyle } from './picture';
 import genRtlStyle from './rtl';
+import { resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
diff --git a/components/upload/style/list.tsx b/components/upload/style/list.tsx
index 9c2ee57152..50e7c031ff 100644
--- a/components/upload/style/list.tsx
+++ b/components/upload/style/list.tsx
@@ -1,6 +1,6 @@
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme';
-import { clearFix } from '../../theme';
+import { clearFix } from '../../style';
 
 const genListStyle: GenerateStyle<UploadToken> = token => {
   const { componentCls, antCls, iconCls, fontSizeBase, lineHeight } = token;
diff --git a/components/upload/style/picture.tsx b/components/upload/style/picture.tsx
index 9809849a5f..072ad90b9f 100644
--- a/components/upload/style/picture.tsx
+++ b/components/upload/style/picture.tsx
@@ -1,7 +1,7 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme';
-import { clearFix } from '../../theme';
+import { clearFix } from '../../style';
 
 const genPictureStyle: GenerateStyle<UploadToken> = token => {
   const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset } = token;
diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index 6e926b3c84..92ba350449 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -19,7 +19,7 @@
   .code-box-title {
     &,
     a {
-      color: @site-text-color;
+      color: @site-text-color !important;
       background: @component-background;
     }
   }
diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less
index 801af77bc8..d51d86a283 100644
--- a/site/theme/static/toc.less
+++ b/site/theme/static/toc.less
@@ -43,7 +43,7 @@ ul.toc > li {
   margin-left: -1px;
   padding-left: 16px;
   overflow: hidden;
-  color: @site-text-color;
+  color: @site-text-color !important;
   white-space: nowrap;
   text-overflow: ellipsis;
   border-left: 1px solid transparent;
@@ -60,11 +60,11 @@ ul.toc > li {
 }
 
 .toc a:hover {
-  color: @primary-color;
+  color: @primary-color !important;
 }
 
 .toc a.current {
-  color: @primary-color;
+  color: @primary-color !important;
   border-color: @primary-color;
 }
 
diff --git a/site/theme/template/Layout/Header/Github.less b/site/theme/template/Layout/Header/Github.less
index 00cf0e3587..4cf5b3f47f 100644
--- a/site/theme/template/Layout/Header/Github.less
+++ b/site/theme/template/Layout/Header/Github.less
@@ -26,6 +26,7 @@
   .gh-count {
     height: auto;
     padding: 4px 8px;
+    color: #000;
     font-weight: normal;
     background: #fff;