refactor: Components based on Input migrate to genHook (#34884)

* refactor: Input base components use genHook

* chore: code style

* chore: code clean

components/_util/theme/interface.ts

@@ -43,8 +43,10 @@ export interface OverrideToken {
   Cascader?: CascaderComponentToken;
   Divider?: DividerComponentToken;
   Empty?: EmptyComponentToken;
+  Input?: {};
   InputNumber?: InputNumberComponentToken;
   Mentions?: MentionsComponentToken;
+  Pagination?: {};
   Select?: SelectComponentToken;
   Slider?: SliderComponentToken;
   Typography?: TypographyComponentToken;

components/input-number/index.tsx

@@ -1,15 +1,18 @@
 import DownOutlined from '@ant-design/icons/DownOutlined';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import classNames from 'classnames';
-import RcInputNumber, { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+import RcInputNumber from 'rc-input-number';
 import * as React from 'react';
 import { useContext } from 'react';
 import { ConfigContext } from '../config-provider';
-import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import type { SizeType } from '../config-provider/SizeContext';
+import SizeContext from '../config-provider/SizeContext';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { cloneElement } from '../_util/reactNode';
 import useStyle from './style';
-import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
+import type { InputStatus } from '../_util/statusUtils';
+import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
 
 type ValueType = string | number;
 
@@ -26,7 +29,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
 }
 
 const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
-  const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
   const [focused, setFocus] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -50,7 +53,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;
   let downIcon = <DownOutlined className={`${prefixCls}-handler-down-inner`} />;

components/input-number/style/index.tsx

@@ -1,12 +1,7 @@
 // deps-lint-skip-all
-import {
+import type { FullToken, GenerateStyle } from '../../_util/theme';
-  GenerateStyle,
+import { genComponentStyleHook, resetComponent, resetIcon } from '../../_util/theme';
-  resetComponent,
+import type { InputToken } from '../../input/style';
-  resetIcon,
-  UseComponentStyleResult,
-  useStyleRegister,
-  useToken,
-} from '../../_util/theme';
 import {
   genActiveStyle,
   genBasicInputStyle,
@@ -16,7 +11,6 @@ import {
   genPlaceholderStyle,
   genStatusStyle,
   initInputToken,
-  InputToken,
 } from '../../input/style';
 
 export interface ComponentToken {
@@ -25,13 +19,11 @@ export interface ComponentToken {
   handleFontSize: number;
 }
 
-interface InputNumberToken extends InputToken, ComponentToken {
+type InputNumberToken = InputToken<FullToken<'InputNumber'>>;
-  inputNumberCls: string;
-}
 
 const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
   const {
-    inputNumberCls,
+    componentCls,
     controlLineWidth,
     controlLineType,
     colorBorder,
@@ -55,7 +47,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 
   return [
     {
-      [inputNumberCls]: {
+      [componentCls]: {
         ...resetComponent(token),
         ...genBasicInputStyle(token),
         ...genStatusStyle(token),
@@ -70,7 +62,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         '&-rtl': {
           direction: 'rtl',
 
-          [`${inputNumberCls}-input`]: {
+          [`${componentCls}-input`]: {
             direction: 'rtl',
           },
         },
@@ -79,7 +71,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           padding: 0,
           fontSize: fontSizeLG,
 
-          [`input${inputNumberCls}-input`]: {
+          [`input${componentCls}-input`]: {
             height: controlHeightLG - 2 * controlLineWidth,
           },
         },
@@ -87,7 +79,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         '&-sm': {
           padding: 0,
 
-          [`input${inputNumberCls}-input`]: {
+          [`input${componentCls}-input`]: {
             height: controlHeightSM - 2 * controlLineWidth,
             padding: `0 ${inputPaddingHorizontalSM}px`,
           },
@@ -103,7 +95,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 
         '&-disabled': {
           ...genDisabledStyle(token),
-          [`${inputNumberCls}-input`]: {
+          [`${componentCls}-input`]: {
             cursor: 'not-allowed',
           },
         },
@@ -125,13 +117,13 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
             textAlign: 'start',
             verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403
 
-            [`${inputNumberCls}-affix-wrapper`]: {
+            [`${componentCls}-affix-wrapper`]: {
               width: '100%',
             },
           },
         },
 
-        [inputNumberCls]: {
+        [componentCls]: {
           '&-input': {
             width: '100%',
             height: controlHeight - 2 * controlLineWidth,
@@ -159,12 +151,12 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 
     // Handler
     {
-      [inputNumberCls]: {
+      [componentCls]: {
-        [`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: {
+        [`&:hover ${componentCls}-handler-wrap, &-focused ${componentCls}-handler-wrap`]: {
           opacity: 1,
         },
 
-        [`${inputNumberCls}-handler-wrap`]: {
+        [`${componentCls}-handler-wrap`]: {
           position: 'absolute',
           insetBlockStart: 0,
           insetInlineEnd: 0,
@@ -184,7 +176,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           // Fix input number inside Menu makes icon too large
           // We arise the selector priority by nest selector here
           // https://github.com/ant-design/ant-design/issues/14367
-          [`${inputNumberCls}-handler`]: {
+          [`${componentCls}-handler`]: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
@@ -192,8 +184,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
             height: '40%',
 
             [`
-              ${inputNumberCls}-handler-up-inner,
+              ${componentCls}-handler-up-inner,
-              ${inputNumberCls}-handler-down-inner
+              ${componentCls}-handler-down-inner
             `]: {
               marginInlineEnd: 0,
               fontSize: token.handleFontSize,
@@ -201,7 +193,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           },
         },
 
-        [`${inputNumberCls}-handler`]: {
+        [`${componentCls}-handler`]: {
           height: '50%',
           overflow: 'hidden',
           color: colorTextSecondary,
@@ -220,8 +212,8 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
             height: `60%`,
 
             [`
-              ${inputNumberCls}-handler-up-inner,
+              ${componentCls}-handler-up-inner,
-              ${inputNumberCls}-handler-down-inner
+              ${componentCls}-handler-down-inner
             `]: {
               color: colorPrimary,
             },
@@ -236,32 +228,32 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
           },
         },
 
-        [`${inputNumberCls}-handler-up`]: {
+        [`${componentCls}-handler-up`]: {
           borderStartEndRadius: controlRadius,
         },
 
-        [`${inputNumberCls}-handler-down`]: {
+        [`${componentCls}-handler-down`]: {
           borderBlockStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`,
           borderEndEndRadius: controlRadius,
         },
 
         // Disabled
         '&-disabled, &-readonly': {
-          [`${inputNumberCls}-handler-wrap`]: {
+          [`${componentCls}-handler-wrap`]: {
             display: 'none',
           },
         },
 
         [`
-          ${inputNumberCls}-handler-up-disabled,
+          ${componentCls}-handler-up-disabled,
-          ${inputNumberCls}-handler-down-disabled
+          ${componentCls}-handler-down-disabled
         `]: {
           cursor: 'not-allowed',
         },
 
         [`
-          ${inputNumberCls}-handler-up-disabled:hover &-handler-up-inner,
+          ${componentCls}-handler-up-disabled:hover &-handler-up-inner,
-          ${inputNumberCls}-handler-down-disabled:hover &-handler-down-inner
+          ${componentCls}-handler-down-disabled:hover &-handler-down-inner
         `]: {
           color: colorTextDisabled,
         },
@@ -270,11 +262,11 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 
     // Border-less
     {
-      [`${inputNumberCls}-borderless`]: {
+      [`${componentCls}-borderless`]: {
         borderColor: 'transparent',
         boxShadow: 'none',
 
-        [`${inputNumberCls}-handler-down`]: {
+        [`${componentCls}-handler-down`]: {
           borderBlockStartWidth: 0,
         },
       },
@@ -283,10 +275,10 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
 };
 
 const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumberToken) => {
-  const { inputNumberCls, inputPaddingHorizontal, inputAffixPadding, controlWidth } = token;
+  const { componentCls, inputPaddingHorizontal, inputAffixPadding, controlWidth } = token;
 
   return {
-    [`${inputNumberCls}-affix-wrapper`]: {
+    [`${componentCls}-affix-wrapper`]: {
       ...genBasicInputStyle(token),
       ...genStatusStyle(token),
       // or number handler will cover form status
@@ -306,22 +298,22 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
       },
 
       '&-disabled': {
-        [`${inputNumberCls}[disabled]`]: {
+        [`${componentCls}[disabled]`]: {
           background: 'transparent',
         },
       },
 
-      [`> div${inputNumberCls}`]: {
+      [`> div${componentCls}`]: {
         width: '100%',
         border: 'none',
         outline: 'none',
 
-        [`&${inputNumberCls}-focused`]: {
+        [`&${componentCls}-focused`]: {
           boxShadow: 'none !important',
         },
       },
 
-      [`input${inputNumberCls}-input`]: {
+      [`input${componentCls}-input`]: {
         padding: 0,
       },
 
@@ -331,11 +323,11 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
         content: '"\\a0"',
       },
 
-      [`${inputNumberCls}-handler-wrap`]: {
+      [`${componentCls}-handler-wrap`]: {
         zIndex: 2,
       },
 
-      [inputNumberCls]: {
+      [componentCls]: {
         '&-prefix, &-suffix': {
           display: 'flex',
           flex: 'none',
@@ -362,29 +354,15 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
 };
 
 // ============================== Export ==============================
-export default function useStyle(
+export default genComponentStyleHook(
-  prefixCls: string,
+  'InputNumber',
-  iconPrefixCls: string,
+  token => {
-): UseComponentStyleResult {
+    const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
-  const [theme, token, hashId] = useToken();
+    return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
-
+  },
-  return [
+  token => ({
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
+    controlWidth: 90,
-      const { InputNumber, controlLineWidth, controlHeightSM, fontSize } = token;
+    handleWidth: token.controlHeightSM - token.controlLineWidth * 2,
-
+    handleFontSize: token.fontSize / 2,
-      const inputNumberToken: InputNumberToken = {
+  }),
-        ...initInputToken(token, prefixCls, iconPrefixCls),
+);
-        inputNumberCls: `.${prefixCls}`,
-
-        controlWidth: 90,
-        handleWidth: controlHeightSM - controlLineWidth * 2,
-        handleFontSize: fontSize / 2,
-
-        ...InputNumber,
-      };
-
-      return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
-    }),
-    hashId,
-  ];
-}

components/input/Group.tsx

@@ -19,11 +19,11 @@ export interface GroupProps {
 }
 
 const Group: React.FC<GroupProps> = props => {
-  const { getPrefixCls, direction, iconPrefixCls } = useContext(ConfigContext);
+  const { getPrefixCls, direction } = useContext(ConfigContext);
   const { prefixCls: customizePrefixCls, className = '' } = props;
   const prefixCls = getPrefixCls('input-group', customizePrefixCls);
   const inputPrefixCls = getPrefixCls('input');
-  const [wrapSSR, hashId] = useStyle(inputPrefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(inputPrefixCls);
   const cls = classNames(
     prefixCls,
     {

components/input/Input.tsx

@@ -1,10 +1,13 @@
 import React, { forwardRef, useContext, useEffect, useRef } from 'react';
-import RcInput, { InputProps as RcInputProps, InputRef } from 'rc-input';
+import type { InputProps as RcInputProps, InputRef } from 'rc-input';
+import RcInput from 'rc-input';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import classNames from 'classnames';
 import { composeRef } from 'rc-util/lib/ref';
-import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import type { SizeType } from '../config-provider/SizeContext';
-import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
+import SizeContext from '../config-provider/SizeContext';
+import type { InputStatus } from '../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext, NoFormStatus } from '../form/context';
 import { hasPrefixSuffix } from './utils';
@@ -133,13 +136,13 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     addonBefore,
     ...rest
   } = props;
-  const { getPrefixCls, direction, input, iconPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('input', customizePrefixCls);
   const inputRef = useRef<InputRef>(null);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   // ===================== Size =====================
   const size = React.useContext(SizeContext);

components/input/TextArea.tsx

@@ -1,15 +1,19 @@
 import classNames from 'classnames';
-import RcTextArea, { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
+import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
-import ResizableTextArea from 'rc-textarea/lib/ResizableTextArea';
+import RcTextArea from 'rc-textarea';
+import type ResizableTextArea from 'rc-textarea/lib/ResizableTextArea';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import SizeContext, { SizeType } from '../config-provider/SizeContext';
+import type { SizeType } from '../config-provider/SizeContext';
+import SizeContext from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import { getStatusClassNames, InputStatus, getMergedStatus } from '../_util/statusUtils';
+import type { InputStatus } from '../_util/statusUtils';
+import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
 import ClearableLabeledInput from './ClearableLabeledInput';
-import { fixControlledValue, InputFocusOptions, resolveOnChange, triggerFocus } from './Input';
+import type { InputFocusOptions } from './Input';
+import { fixControlledValue, resolveOnChange, triggerFocus } from './Input';
 import useStyle from './style';
 
 interface ShowCountProps {
@@ -72,7 +76,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     },
     ref,
   ) => {
-    const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
+    const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const size = React.useContext(SizeContext);
 
     const {
@@ -163,7 +167,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
     const prefixCls = getPrefixCls('input', customizePrefixCls);
 
     // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
 
     React.useImperativeHandle(ref, () => ({
       resizableTextArea: innerRef.current?.resizableTextArea,

components/input/style/index.tsx

@@ -1,18 +1,10 @@
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
-import {
+import { clearFix, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme';
-  clearFix,
+import type { FullToken } from '../../_util/theme';
-  DerivativeToken,
+import type { GlobalToken } from '../../_util/theme/interface';
-  GenerateStyle,
-  resetComponent,
-  UseComponentStyleResult,
-  useStyleRegister,
-  useToken,
-} from '../../_util/theme';
 
-export interface InputToken extends DerivativeToken {
+export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
-  prefixCls: string;
-  iconPrefixCls: string;
   inputAffixPadding: number;
   inputPaddingVertical: number;
   inputPaddingVerticalLG: number;
@@ -21,7 +13,7 @@ export interface InputToken extends DerivativeToken {
   inputPaddingHorizontalSM: number;
   inputBorderHoverColor: string;
   inputBorderActiveColor: string;
-}
+};
 
 export const genPlaceholderStyle = (color: string): CSSObject => ({
   // Firefox
@@ -564,12 +556,12 @@ const genAllowClearStyle = (token: InputToken): CSSObject => {
 const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
   const {
     prefixCls,
-    iconPrefixCls,
     inputAffixPadding,
     colorTextSecondary,
     motionDurationSlow,
     colorAction,
     colorActionHover,
+    iconCls,
   } = token;
 
   return {
@@ -642,7 +634,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       ...genAllowClearStyle(token),
 
       // password
-      [`.${iconPrefixCls}.${prefixCls}-password-icon`]: {
+      [`${iconCls}.${prefixCls}-password-icon`]: {
         color: colorAction,
         cursor: 'pointer',
         transition: `all ${motionDurationSlow}`,
@@ -776,33 +768,29 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
   };
 };
 
-export const initInputToken = (
+export function initInputToken<T extends GlobalToken = GlobalToken>(token: T): InputToken<T> {
-  token: DerivativeToken,
+  return {
-  prefixCls: string,
+    ...token,
-  iconPrefixCls: string,
+    inputAffixPadding: token.paddingXXS,
-): InputToken => ({
+    inputPaddingVertical: Math.max(
-  ...token,
+      Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
-  prefixCls,
+        token.controlLineWidth,
-  iconPrefixCls,
+      3,
-  inputAffixPadding: token.paddingXXS,
+    ),
-  inputPaddingVertical: Math.max(
+    inputPaddingVerticalLG:
-    Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
+      Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
       token.controlLineWidth,
-    3,
+    inputPaddingVerticalSM: Math.max(
-  ),
+      Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
-  inputPaddingVerticalLG:
+        token.controlLineWidth,
-    Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeight) / 2) * 10) / 10 -
+      0,
-    token.controlLineWidth,
+    ),
-  inputPaddingVerticalSM: Math.max(
+    inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth,
-    Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 -
+    inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth,
-      token.controlLineWidth,
+    inputBorderHoverColor: token.colorPrimaryHover,
-    0,
+    inputBorderActiveColor: token.colorPrimaryHover,
-  ),
+  };
-  inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth,
+}
-  inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth,
-  inputBorderHoverColor: token.colorPrimaryHover,
-  inputBorderActiveColor: token.colorPrimaryHover,
-});
 
 const genTextAreaStyle: GenerateStyle<InputToken> = token => {
   const { prefixCls, inputPaddingHorizontal, paddingLG } = token;
@@ -857,24 +845,14 @@ const genTextAreaStyle: GenerateStyle<InputToken> = token => {
 };
 
 // ============================== Export ==============================
-export default function useStyle(
+export default genComponentStyleHook('Input', token => {
-  prefixCls: string,
+  const inputToken = initInputToken<FullToken<'Input'>>(token);
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
 
   return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
+    genInputStyle(inputToken),
-      const inputToken: InputToken = initInputToken(token, prefixCls, iconPrefixCls);
+    genTextAreaStyle(inputToken),
-
+    genAffixStyle(inputToken),
-      return [
+    genGroupStyle(inputToken),
-        genInputStyle(inputToken),
+    genSearchInputStyle(inputToken),
-        genTextAreaStyle(inputToken),
-        genAffixStyle(inputToken),
-        genGroupStyle(inputToken),
-        genSearchInputStyle(inputToken),
-      ];
-    }),
-    hashId,
   ];
-}
+});

components/mentions/index.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import RcMentions from 'rc-mentions';
-import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
+import type { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
 import { composeRef } from 'rc-util/lib/ref';
 // eslint-disable-next-line import/no-named-as-default
 import Spin from '../spin';
 import { ConfigContext } from '../config-provider';
 import { FormItemInputContext } from '../form/context';
 import useStyle from './style';
-import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
+import type { InputStatus } from '../_util/statusUtils';
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 
 export const { Option } = RcMentions;
 
@@ -67,7 +68,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
   const [focused, setFocused] = React.useState(false);
   const innerRef = React.useRef<HTMLElement>();
   const mergedRef = composeRef(ref, innerRef);
-  const { getPrefixCls, renderEmpty, direction, iconPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext);
   const {
     status: contextStatus,
     hasFeedback,
@@ -120,7 +121,7 @@ const InternalMentions: React.ForwardRefRenderFunction<unknown, MentionProps> =
   const prefixCls = getPrefixCls('mentions', customizePrefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const mergedClassName = classNames(
     {

components/mentions/style/index.tsx

@@ -1,11 +1,5 @@
 // deps-lint-skip-all
-import {
+import { FullToken, genComponentStyleHook, GenerateStyle, resetComponent } from '../../_util/theme';
-  GenerateStyle,
-  resetComponent,
-  UseComponentStyleResult,
-  useStyleRegister,
-  useToken,
-} from '../../_util/theme';
 import {
   genActiveStyle,
   genBasicInputStyle,
@@ -22,13 +16,11 @@ export interface ComponentToken {
   controlItemWidth: number;
 }
 
-interface MentionsToken extends InputToken, ComponentToken {
+type MentionsToken = InputToken<FullToken<'Mentions'>>;
-  mentionsCls: string;
-}
 
 const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
   const {
-    mentionsCls,
+    componentCls,
     colorTextDisabled,
     controlItemBgHover,
     controlPaddingHorizontal,
@@ -49,7 +41,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
   );
 
   return {
-    [`${mentionsCls}`]: {
+    [`${componentCls}`]: {
       ...resetComponent(token),
       ...genBasicInputStyle(token),
 
@@ -74,7 +66,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
         ...genActiveStyle(token),
       },
 
-      [`&-affix-wrapper ${mentionsCls}-suffix`]: {
+      [`&-affix-wrapper ${componentCls}-suffix`]: {
         position: 'absolute',
         top: 0,
         insetInlineEnd: inputPaddingHorizontal,
@@ -86,7 +78,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
       },
 
       // ================= Input Area =================
-      [`> textarea, ${mentionsCls}-measure`]: {
+      [`> textarea, ${componentCls}-measure`]: {
         minHeight: controlHeight - 2,
         margin: 0,
         padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`,
@@ -119,7 +111,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
         ...genPlaceholderStyle(token.colorPlaceholder),
       },
 
-      [`${mentionsCls}-measure`]: {
+      [`${componentCls}-measure`]: {
         position: 'absolute',
         top: 0,
         insetInlineEnd: 0,
@@ -156,7 +148,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
           display: 'none',
         },
 
-        [`${mentionsCls}-dropdown-menu`]: {
+        [`${componentCls}-dropdown-menu`]: {
           maxHeight: token.dropdownHeight,
           marginBottom: 0,
           paddingInlineStart: 0, // Override default ul/ol
@@ -224,30 +216,15 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
 };
 
 // ============================== Export ==============================
-export default function useStyle(
+export default genComponentStyleHook(
-  prefixCls: string,
+  'Mentions',
-  iconPrefixCls: string,
+  token => {
-): UseComponentStyleResult {
+    const mentionsToken = initInputToken<FullToken<'Mentions'>>(token);
-  const [theme, token, hashId] = useToken();
+    return [genMentionsStyle(mentionsToken)];
-
+  },
-  return [
+  token => ({
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
+    dropdownHeight: 250,
-      const { zIndexPopup, Mentions } = token;
+    controlItemWidth: 100,
-
+    zIndexDropdown: token.zIndexPopup + 50,
-      const mentionsToken: MentionsToken = {
+  }),
-        ...initInputToken(token, prefixCls, iconPrefixCls),
+);
-
-        mentionsCls: `.${prefixCls}`,
-
-        dropdownHeight: 250,
-        controlItemWidth: 100,
-        zIndexDropdown: zIndexPopup + 50,
-
-        ...Mentions,
-      };
-
-      return [genMentionsStyle(mentionsToken)];
-    }),
-    hashId,
-  ];
-}

components/pagination/Pagination.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import RcPagination, {
+import type { PaginationProps as RcPaginationProps } from 'rc-pagination';
-  PaginationLocale,
+import RcPagination, { PaginationLocale } from 'rc-pagination';
-  PaginationProps as RcPaginationProps,
-} from 'rc-pagination';
 import enUS from 'rc-pagination/lib/locale/en_US';
 import classNames from 'classnames';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
@@ -43,16 +41,11 @@ const Pagination: React.FC<PaginationProps> = ({
 }) => {
   const { xs } = useBreakpoint(responsive);
 
-  const { getPrefixCls, iconPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('pagination', customizePrefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(
+  const [wrapSSR, hashId] = useStyle(prefixCls);
-    getPrefixCls(),
-    prefixCls,
-    getPrefixCls('input'),
-    iconPrefixCls,
-  );
 
   const getIconsProps = () => {
     const ellipsis = <span className={`${prefixCls}-item-ellipsis`}>•••</span>;

components/pagination/style/index.tsx

@@ -7,45 +7,33 @@ import {
   genInputSmallStyle,
   type InputToken,
 } from '../../input/style';
-import {
+import { resetComponent, genComponentStyleHook } from '../../_util/theme';
-  DerivativeToken,
+import type { GenerateStyle, FullToken } from '../../_util/theme';
-  resetComponent,
-  UseComponentStyleResult,
-  useStyleRegister,
-  useToken,
-  GenerateStyle,
-} from '../../_util/theme';
 
-interface PaginationToken extends DerivativeToken {
+interface PaginationToken extends InputToken<FullToken<'Pagination'>> {
-  paginationItemSzie: number;
+  paginationItemSize: number;
   paginationFontFamily: string;
   paginationItemBg: string;
   paginationItemBgActive: string;
   paginationFontWeightActive: number;
   paginationItemSizeSM: number;
-  pagniationItemInputBg: string;
+  paginationItemInputBg: string;
   paginationMiniOptionsSizeChangerTop: number;
   paginationItemDisabledBgActive: string;
   paginationItemDisabledColorActive: string;
   paginationItemLinkBg: string;
-  screenLG: number;
-  screenSM: number;
   inputOutlineOffset: string;
-  antPrefixCls: string;
-  paginationCls: string;
-  iconPrefixCls: string;
-  inputToken: InputToken;
 }
 
 const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
-  const { paginationCls } = token;
+  const { componentCls } = token;
 
   return {
-    [`${paginationCls}-disabled`]: {
+    [`${componentCls}-disabled`]: {
       '&, &:hover': {
         cursor: 'not-allowed',
 
-        [`${paginationCls}-item-link`]: {
+        [`${componentCls}-item-link`]: {
           color: token.colorTextDisabled,
           borderColor: token.colorBorder,
           cursor: 'not-allowed',
@@ -55,7 +43,7 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
       '&:focus-visible': {
         cursor: 'not-allowed',
 
-        [`${paginationCls}-item-link`]: {
+        [`${componentCls}-item-link`]: {
           color: token.colorTextDisabled,
           borderColor: token.colorBorder,
           cursor: 'not-allowed',
@@ -63,10 +51,10 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
       },
     },
 
-    [`&${paginationCls}-disabled`]: {
+    [`&${componentCls}-disabled`]: {
       cursor: 'not-allowed',
 
-      [`${paginationCls}-item`]: {
+      [`${componentCls}-item`]: {
         background: token.colorBgComponentDisabled,
         borderColor: token.colorBorder,
         cursor: 'not-allowed',
@@ -87,26 +75,26 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
         },
       },
 
-      [`${paginationCls}-item-link`]: {
+      [`${componentCls}-item-link`]: {
         color: token.colorTextDisabled,
         background: token.colorBgComponentDisabled,
         borderColor: token.colorBorder,
         cursor: 'not-allowed',
 
-        [`${paginationCls}-simple&`]: {
+        [`${componentCls}-simple&`]: {
           background: 'transparent',
         },
       },
 
-      [`${paginationCls}-item-link-icon`]: {
+      [`${componentCls}-item-link-icon`]: {
         opacity: 0,
       },
 
-      [`${paginationCls}-item-ellipsis`]: {
+      [`${componentCls}-item-ellipsis`]: {
         opacity: 1,
       },
 
-      [`${paginationCls}-simple-pager`]: {
+      [`${componentCls}-simple-pager`]: {
         color: token.colorTextDisabled,
       },
     },
@@ -114,27 +102,27 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
 };
 
 const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
-  const { paginationCls } = token;
+  const { componentCls } = token;
 
   return {
-    [`&.mini ${paginationCls}-total-text, &.mini ${paginationCls}-simple-pager`]: {
+    [`&.mini ${componentCls}-total-text, &.mini ${componentCls}-simple-pager`]: {
       height: token.paginationItemSizeSM,
       lineHeight: `${token.paginationItemSizeSM}px`,
     },
 
-    [`&.mini ${paginationCls}-item`]: {
+    [`&.mini ${componentCls}-item`]: {
       minWidth: token.paginationItemSizeSM,
       height: token.paginationItemSizeSM,
       margin: 0,
       lineHeight: `${token.paginationItemSizeSM - 2}px`,
     },
 
-    [`&.mini ${paginationCls}-item:not(${paginationCls}-item-active)`]: {
+    [`&.mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
       background: 'transparent',
       borderColor: 'transparent',
     },
 
-    [`&.mini ${paginationCls}-prev, &.mini ${paginationCls}-next`]: {
+    [`&.mini ${componentCls}-prev, &.mini ${componentCls}-next`]: {
       minWidth: token.paginationItemSizeSM,
       height: token.paginationItemSizeSM,
       margin: 0,
@@ -142,8 +130,8 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
     },
 
     [`
-    &.mini ${paginationCls}-prev ${paginationCls}-item-link,
+    &.mini ${componentCls}-prev ${componentCls}-item-link,
-    &.mini ${paginationCls}-next ${paginationCls}-item-link
+    &.mini ${componentCls}-next ${componentCls}-item-link
     `]: {
       background: 'transparent',
       borderColor: 'transparent',
@@ -154,13 +142,13 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
       },
     },
 
-    [`&.mini ${paginationCls}-jump-prev, &.mini ${paginationCls}-jump-next`]: {
+    [`&.mini ${componentCls}-jump-prev, &.mini ${componentCls}-jump-next`]: {
       height: token.paginationItemSizeSM,
       marginInlineEnd: 0,
       lineHeight: `${token.paginationItemSizeSM}px`,
     },
 
-    [`&.mini ${paginationCls}-options`]: {
+    [`&.mini ${componentCls}-options`]: {
       // FIXME
       marginInlineStart: 2,
 
@@ -173,7 +161,7 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
         lineHeight: `${token.paginationItemSizeSM}px`,
 
         input: {
-          ...genInputSmallStyle(token.inputToken),
+          ...genInputSmallStyle(token),
 
           // FIXME
           width: 44,
@@ -185,17 +173,17 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
 };
 
 const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
-  const { paginationCls } = token;
+  const { componentCls } = token;
 
   return {
     [`
-    &${paginationCls}-simple ${paginationCls}-prev,
+    &${componentCls}-simple ${componentCls}-prev,
-    &${paginationCls}-simple ${paginationCls}-next
+    &${componentCls}-simple ${componentCls}-next
     `]: {
       height: token.paginationItemSizeSM,
       lineHeight: `${token.paginationItemSizeSM}px`,
       verticalAlign: 'top',
-      [`${paginationCls}-item-link`]: {
+      [`${componentCls}-item-link`]: {
         height: token.paginationItemSizeSM,
         backgroundColor: 'transparent',
         border: 0,
@@ -207,7 +195,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
       },
     },
 
-    [`&${paginationCls}-simple ${paginationCls}-simple-pager`]: {
+    [`&${componentCls}-simple ${componentCls}-simple-pager`]: {
       display: 'inline-block',
       height: token.paginationItemSizeSM,
       marginInlineEnd: token.marginXS,
@@ -219,7 +207,7 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
         // FIXME: hardcode in v4
         padding: '0 6px',
         textAlign: 'center',
-        backgroundColor: token.pagniationItemInputBg,
+        backgroundColor: token.paginationItemInputBg,
         border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
         borderRadius: token.radiusBase,
         outline: 'none',
@@ -246,16 +234,16 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
 };
 
 const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
-  const { paginationCls } = token;
+  const { componentCls } = token;
 
   return {
-    [`${paginationCls}-jump-prev, ${paginationCls}-jump-next`]: {
+    [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
       outline: 0,
 
-      [`${paginationCls}-item-container`]: {
+      [`${componentCls}-item-container`]: {
         position: 'relative',
 
-        [`${paginationCls}-item-link-icon`]: {
+        [`${componentCls}-item-link-icon`]: {
           color: token.colorPrimary,
           fontSize: token.fontSizeSM,
           // FIXME
@@ -272,7 +260,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
           },
         },
 
-        [`${paginationCls}-item-ellipsis`]: {
+        [`${componentCls}-item-ellipsis`]: {
           position: 'absolute',
           top: 0,
           insetInlineEnd: 0,
@@ -293,44 +281,44 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
       },
 
       '&:hover': {
-        [`${paginationCls}-item-link-icon`]: {
+        [`${componentCls}-item-link-icon`]: {
           opacity: 1,
         },
-        [`${paginationCls}-item-ellipsis`]: {
+        [`${componentCls}-item-ellipsis`]: {
           opacity: 0,
         },
       },
 
       '&:focus-visible': {
-        [`${paginationCls}-item-link-icon`]: {
+        [`${componentCls}-item-link-icon`]: {
           opacity: 1,
         },
-        [`${paginationCls}-item-ellipsis`]: {
+        [`${componentCls}-item-ellipsis`]: {
           opacity: 0,
         },
       },
     },
 
     [`
-    ${paginationCls}-prev,
+    ${componentCls}-prev,
-    ${paginationCls}-jump-prev,
+    ${componentCls}-jump-prev,
-    ${paginationCls}-jump-next
+    ${componentCls}-jump-next
     `]: {
       marginInlineEnd: token.marginXS,
     },
 
     [`
-    ${paginationCls}-prev,
+    ${componentCls}-prev,
-    ${paginationCls}-next,
+    ${componentCls}-next,
-    ${paginationCls}-jump-prev,
+    ${componentCls}-jump-prev,
-    ${paginationCls}-jump-next
+    ${componentCls}-jump-next
     `]: {
       display: 'inline-block',
-      minWidth: token.paginationItemSzie,
+      minWidth: token.paginationItemSize,
-      height: token.paginationItemSzie,
+      height: token.paginationItemSize,
       color: token.colorText,
       fontFamily: token.paginationFontFamily,
-      lineHeight: `${token.paginationItemSzie}px`,
+      lineHeight: `${token.paginationItemSize}px`,
       textAlign: 'center',
       verticalAlign: 'middle',
       listStyle: 'none',
@@ -339,7 +327,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
       transition: `all ${token.motionDurationSlow}`,
     },
 
-    [`${paginationCls}-prev, ${paginationCls}-next`]: {
+    [`${componentCls}-prev, ${componentCls}-next`]: {
       fontFamily: 'Arial, Helvetica, sans-serif',
       outline: 0,
 
@@ -353,7 +341,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
         borderColor: token.colorPrimaryHover,
       },
 
-      [`${paginationCls}-item-link`]: {
+      [`${componentCls}-item-link`]: {
         display: 'block',
         // FIXME
         width: '100%',
@@ -368,24 +356,24 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
         transition: `all ${token.motionDurationSlow}`,
       },
 
-      [`&:focus-visible ${paginationCls}-item-link`]: {
+      [`&:focus-visible ${componentCls}-item-link`]: {
         color: token.colorPrimary,
         borderColor: token.colorPrimary,
       },
 
-      [`&:hover ${paginationCls}-item-link`]: {
+      [`&:hover ${componentCls}-item-link`]: {
         color: token.colorPrimary,
         borderColor: token.colorPrimary,
       },
     },
 
-    [`${paginationCls}-slash`]: {
+    [`${componentCls}-slash`]: {
       // FIXME
       marginInlineEnd: 10,
       marginInlineStart: 5,
     },
 
-    [`${paginationCls}-options`]: {
+    [`${componentCls}-options`]: {
       display: 'inline-block',
       marginInlineStart: token.margin,
       verticalAlign: 'middle',
@@ -410,7 +398,7 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
         verticalAlign: 'top',
 
         input: {
-          ...genBasicInputStyle(token.inputToken),
+          ...genBasicInputStyle(token),
 
           // FIXME
           width: 50,
@@ -425,16 +413,16 @@ const genPaginationJumpStyle: GenerateStyle<PaginationToken, CSSObject> = token
 };
 
 const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
-  const { paginationCls } = token;
+  const { componentCls } = token;
 
   return {
-    [`${paginationCls}-item`]: {
+    [`${componentCls}-item`]: {
       display: 'inline-block',
-      minWidth: token.paginationItemSzie,
+      minWidth: token.paginationItemSize,
-      height: token.paginationItemSzie,
+      height: token.paginationItemSize,
       marginInlineEnd: token.marginXS,
       fontFamily: token.paginationFontFamily,
-      lineHeight: `${token.paginationItemSzie - 2}px`,
+      lineHeight: `${token.paginationItemSize - 2}px`,
       textAlign: 'center',
       verticalAlign: 'middle',
       listStyle: 'none',
@@ -507,10 +495,10 @@ const genPaginationItemStyle: GenerateStyle<PaginationToken, CSSObject> = token
 };
 
 const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
-  const { paginationCls } = token;
+  const { componentCls } = token;
 
   return {
-    [paginationCls]: {
+    [componentCls]: {
       ...resetComponent(token),
 
       'ul, ol': {
@@ -528,11 +516,11 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
         content: '""',
       },
 
-      [`${paginationCls}-total-text`]: {
+      [`${componentCls}-total-text`]: {
         display: 'inline-block',
-        height: token.paginationItemSzie,
+        height: token.paginationItemSize,
         marginInlineEnd: token.marginXS,
-        lineHeight: `${token.paginationItemSzie - 2}px`,
+        lineHeight: `${token.paginationItemSize - 2}px`,
         verticalAlign: 'middle',
       },
 
@@ -553,7 +541,7 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
 
       // media query style
       [`@media only screen and (max-width: ${token.screenLG}px)`]: {
-        [`${paginationCls}-item`]: {
+        [`${componentCls}-item`]: {
           '&-after-jump-prev, &-before-jump-next': {
             display: 'none',
           },
@@ -561,55 +549,37 @@ const genPaginationStyle: GenerateStyle<PaginationToken, CSSObject> = token => {
       },
 
       [`@media only screen and (max-width: ${token.screenSM}px)`]: {
-        [`${paginationCls}-options`]: {
+        [`${componentCls}-options`]: {
           display: 'none',
         },
       },
     },
 
     // rtl style
-    [`&${token.paginationCls}-rtl`]: {
+    [`&${token.componentCls}-rtl`]: {
       direction: 'rtl',
     },
   };
 };
 
 // ============================== Export ==============================
-export default function useStyle(
+export default genComponentStyleHook('Pagination', token => {
-  antPrefixCls: string,
-  paginationPrefixCls: string,
-  inputPrefixCls: string,
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
   const paginationToken: PaginationToken = {
     ...token,
     // FIXME: missing token
-    paginationItemSzie: token.controlHeight,
+    paginationItemSize: token.controlHeight,
     paginationFontFamily: token.fontFamily,
     paginationItemBg: token.colorBgComponent,
     paginationItemBgActive: token.colorBgComponent,
     paginationFontWeightActive: 500,
     paginationItemSizeSM: 24,
-    pagniationItemInputBg: token.colorBgComponent,
+    paginationItemInputBg: token.colorBgComponent,
     paginationMiniOptionsSizeChangerTop: 0,
     paginationItemDisabledBgActive: new TinyColor('#000').tint(90).toString(), // tint(@black, 90%)
     paginationItemDisabledColorActive: token.colorTextDisabled,
     paginationItemLinkBg: token.colorBgComponent,
     inputOutlineOffset: '0 0',
-    screenLG: 992,
+    ...initInputToken(token),
-    screenSM: 576,
-    antPrefixCls: `.${antPrefixCls}`,
-    paginationCls: `.${paginationPrefixCls}`,
-    iconPrefixCls: `.${iconPrefixCls}`,
-    inputToken: initInputToken(token, inputPrefixCls, iconPrefixCls),
   };
-
+  return [genPaginationStyle(paginationToken)];
-  return [
+});
-    useStyleRegister({ theme, token, hashId, path: [paginationPrefixCls] }, () => [
-      genPaginationStyle(paginationToken),
-    ]),
-    hashId,
-  ];
-}

components/typography/style/index.tsx

@@ -1,6 +1,6 @@
 // deps-lint-skip-all
-import { useStyleRegister, useToken } from '../../_util/theme';
+import { FullToken, genComponentStyleHook } from '../../_util/theme';
-import type { UseComponentStyleResult, GenerateStyle, AliasToken } from '../../_util/theme';
+import type { GenerateStyle } from '../../_util/theme';
 import { operationUnit } from '../../_util/theme/util/operationUnit';
 import {
   getTitleStyles,
@@ -17,15 +17,13 @@ export interface ComponentToken {
   sizeMarginHeadingVerticalEnd: number | string;
 }
 
-export interface TypographyToken extends AliasToken, ComponentToken {
+export type TypographyToken = FullToken<'Typography'>;
-  typographyCls: string;
-}
 
 const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
-  const { typographyCls, sizeMarginHeadingVerticalStart } = token;
+  const { componentCls, sizeMarginHeadingVerticalStart } = token;
 
   return {
-    [typographyCls]: {
+    [componentCls]: {
       color: token.colorText,
       overflowWrap: 'break-word',
       '&&-secondary': {
@@ -99,9 +97,9 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
 
       // Operation
       [`
-        ${typographyCls}-expand,
+        ${componentCls}-expand,
-        ${typographyCls}-edit,
+        ${componentCls}-edit,
-        ${typographyCls}-copy
+        ${componentCls}-copy
       `]: {
         ...operationUnit(token),
         marginInlineStart: token.marginXXS,
@@ -121,26 +119,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = token => {
 };
 
 // ============================== Export ==============================
-export default function useStyle(prefixCls: string): UseComponentStyleResult {
+export default genComponentStyleHook('Typography', token => [genTypographyStyle(token)], {
-  const [theme, token, hashId] = useToken();
+  sizeMarginHeadingVerticalStart: '1.2em',
-
+  sizeMarginHeadingVerticalEnd: '0.5em',
-  return [
+});
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
-      const { Typography } = token;
-
-      const typographyToken: TypographyToken = {
-        ...token,
-
-        typographyCls: `.${prefixCls}`,
-
-        sizeMarginHeadingVerticalStart: '1.2em',
-        sizeMarginHeadingVerticalEnd: '0.5em',
-
-        ...Typography,
-      };
-
-      return [genTypographyStyle(typographyToken)];
-    }),
-    hashId,
-  ];
-}

components/typography/style/mixins.tsx

@@ -56,7 +56,7 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = token =
 };
 
 export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
-  const { typographyCls } = token;
+  const { componentCls } = token;
 
   return {
     'a&, a': {
@@ -67,7 +67,7 @@ export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = token =>
         textDecoration: token.linkHoverDecoration,
       },
 
-      [`&[disabled], &${typographyCls}-disabled`]: {
+      [`&[disabled], &${componentCls}-disabled`]: {
         color: token.colorTextDisabled,
         cursor: 'not-allowed',
 
@@ -183,9 +183,9 @@ export const getResetStyles = (): CSSObject => ({
 });
 
 export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = token => {
-  const { typographyCls } = token;
+  const { componentCls } = token;
 
-  const inputToken = initInputToken(token, '', '');
+  const inputToken = initInputToken(token);
   const inputShift = inputToken.inputPaddingVertical + 1;
   return {
     '&-edit-content': {
@@ -197,7 +197,7 @@ export const getEditableStyles: GenerateStyle<TypographyToken, CSSObject> = toke
         marginBottom: `calc(1em - ${inputShift}px)`,
       },
 
-      [`${typographyCls}-edit-content-confirm`]: {
+      [`${componentCls}-edit-content-confirm`]: {
         position: 'absolute',
         insetInlineEnd: token.marginXS + 2,
         insetBlockEnd: token.marginXS,