chore: Add GenerateStyle ts def (#34429)

* chore: Alert with types

* chore: rest component

* chore: more

* chore: fix lint

components/_util/theme/index.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { generate } from '@ant-design/colors';
 import { TinyColor } from '@ctrl/tinycolor';
-import { CSSObject, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
+import {
+  CSSInterpolation,
+  CSSObject,
+  Theme,
+  useCacheToken,
+  useStyleRegister,
+} from '@ant-design/cssinjs';
 import defaultDesignToken from './default';
 import version from '../../version';
 import { resetComponent, resetIcon, clearFix } from './util';
@@ -215,6 +221,11 @@ export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToke
 
 export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
 
+export type GenerateStyle<ComponentToken extends object, ReturnType = CSSInterpolation> = (
+  token: ComponentToken,
+  hashId?: string,
+) => ReturnType;
+
 // ================================== Util ==================================
 export function withPrefix(
   style: CSSObject,

components/alert/style/index.tsx

@@ -11,10 +11,14 @@ import {
   useToken,
   resetComponent,
   UseComponentStyleResult,
+  GenerateStyle,
 } from '../../_util/theme';
 
 // FIXME: missing token
 type AlertToken = DerivativeToken & {
+  alertCls: string;
+  iconPrefixCls: string;
+
   alertMessageColor: string;
   alertCloseColor: string;
   alertCloseHoverColor: string;
@@ -55,8 +59,9 @@ const genAlertTypeStyle = (
   },
 });
 
-export const genBaseStyle = (alertCls: string, token: AlertToken): CSSObject => {
+export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
   const {
+    alertCls,
     duration,
     marginXS,
     fontSize,
@@ -149,8 +154,9 @@ export const genBaseStyle = (alertCls: string, token: AlertToken): CSSObject =>
   };
 };
 
-export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject => {
+export const genTypeStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
   const {
+    alertCls,
     alertInfoBgColor,
     alertInfoIconColor,
     alertInfoBorderColor,
@@ -208,12 +214,16 @@ export const genTypeStyle = (alertCls: string, token: AlertToken): CSSObject =>
   };
 };
 
-export const genActionStyle = (
+export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
-  alertCls: string,
+  const {
-  iconPrefixCls: string,
+    alertCls,
-  token: AlertToken,
+    iconPrefixCls,
-): CSSObject => {
+    duration,
-  const { duration, marginXS, fontSizeSM, alertCloseColor, alertCloseHoverColor } = token;
+    marginXS,
+    fontSizeSM,
+    alertCloseColor,
+    alertCloseHoverColor,
+  } = token;
 
   return {
     [alertCls]: {
@@ -252,8 +262,8 @@ export const genActionStyle = (
   };
 };
 
-export const genRTLStyle = (alertCls: string, token: AlertToken): CSSObject => {
+export const genRTLStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSObject => {
-  const { alertWithDescriptionIconSize, alertWithDescriptionPaddingVertical } = token;
+  const { alertCls, alertWithDescriptionIconSize, alertWithDescriptionPaddingVertical } = token;
 
   return {
     [alertCls]: {
@@ -271,11 +281,19 @@ export const genRTLStyle = (alertCls: string, token: AlertToken): CSSObject => {
   };
 };
 
-export const genAlertStyle = (
+export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSInterpolation => [
+  genBaseStyle(token),
+  genTypeStyle(token),
+  genActionStyle(token),
+  genRTLStyle(token),
+];
+
+export default function useStyle(
   prefixCls: string,
   iconPrefixCls: string,
-  token: DerivativeToken,
+): UseComponentStyleResult {
-): CSSInterpolation => {
+  const [theme, token, hashId] = useToken();
+
   const alertCls = `.${prefixCls}`;
 
   const alertMessageColor = token.headingColor;
@@ -308,8 +326,10 @@ export const genAlertStyle = (
   const alertErrorIconColor = token.errorColor;
   const alertErrorBorderColor = errorColors[2];
 
-  const alertToken = {
+  const alertToken: AlertToken = {
     ...token,
+    alertCls,
+    iconPrefixCls,
     alertInfoBgColor,
     alertInfoIconColor,
     alertInfoBorderColor,
@@ -331,23 +351,9 @@ export const genAlertStyle = (
     alertWithDescriptionPadding,
   };
 
-  return [
-    genBaseStyle(alertCls, alertToken),
-    genTypeStyle(alertCls, alertToken),
-    genActionStyle(alertCls, iconPrefixCls, alertToken),
-    genRTLStyle(alertCls, alertToken),
-  ];
-};
-
-export default function useStyle(
-  prefixCls: string,
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
   return [
     useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
-      genAlertStyle(prefixCls, iconPrefixCls, token),
+      genAlertStyle(alertToken),
     ]),
     hashId,
   ];

components/cascader/style/index.tsx

@@ -8,12 +8,12 @@
 // // deps-lint-skip: form
 
 // deps-lint-skip-all
-import { CSSInterpolation } from '@ant-design/cssinjs';
 import {
   DerivativeToken,
   useStyleRegister,
   useToken,
   UseComponentStyleResult,
+  GenerateStyle,
 } from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 
@@ -23,7 +23,7 @@ interface CascaderToken extends DerivativeToken {
 }
 
 // =============================== Base ===============================
-const genBaseStyle = (token: CascaderToken, hashId: string): CSSInterpolation => {
+const genBaseStyle: GenerateStyle<CascaderToken> = (token, hashId) => {
   const { prefixCls, cascaderCls } = token;
   const cascaderMenuItemCls = `${cascaderCls}-menu-item`;
   const iconCls = `
@@ -51,7 +51,7 @@ const genBaseStyle = (token: CascaderToken, hashId: string): CSSInterpolation =>
     {
       [`${cascaderCls}-dropdown`]: [
         // ==================== Checkbox ====================
-        getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
+        getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId!),
         {
           [cascaderCls]: {
             // ================== Checkbox ==================

components/checkbox/style/index.tsx

@@ -1,13 +1,18 @@
 // deps-lint-skip-all
-import { CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
+import { Keyframes } from '@ant-design/cssinjs';
 import {
   DerivativeToken,
   useStyleRegister,
   useToken,
   resetComponent,
   UseComponentStyleResult,
+  GenerateStyle,
 } from '../../_util/theme';
 
+interface CheckboxToken extends DerivativeToken {
+  checkboxCls: string;
+}
+
 // ============================== Motion ==============================
 const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
   '0%': {
@@ -22,12 +27,8 @@ const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
 });
 
 // ============================== Styles ==============================
-export const genCheckboxStyle = (
+export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) => {
-  prefixCls: string,
+  const { checkboxCls } = token;
-  token: DerivativeToken,
-  hashId: string,
-): CSSInterpolation => {
-  const checkboxCls = `.${prefixCls}`;
   const wrapperCls = `${checkboxCls}-wrapper`;
 
   return [
@@ -235,7 +236,12 @@ export const genCheckboxStyle = (
 
 // ============================== Export ==============================
 export function getStyle(prefixCls: string, token: DerivativeToken, hashId: string) {
-  return [genCheckboxStyle(prefixCls, token, hashId), antCheckboxEffect];
+  const checkboxToken: CheckboxToken = {
+    ...token,
+    checkboxCls: `.${prefixCls}`,
+  };
+
+  return [genCheckboxStyle(checkboxToken, hashId), antCheckboxEffect];
 }
 
 export default function useStyle(prefixCls: string): UseComponentStyleResult {

components/divider/style/index.tsx

@@ -6,9 +6,12 @@ import {
   useToken,
   UseComponentStyleResult,
   resetComponent,
+  GenerateStyle,
 } from '../../_util/theme';
 
 interface DividerToken extends DerivativeToken {
+  dividerCls: string;
+
   dividerBorderColor: string;
 
   dividerBorderWidth: number;
@@ -19,131 +22,129 @@ interface DividerToken extends DerivativeToken {
   dividerHorizontalGutterMargin: number;
 }
 
-// FIXME
-interface genStyleProps {
-  token: DividerToken;
-  prefixCls: string;
-}
-
 // ============================== Shared ==============================
-const genSharedDividerStyle = ({ token, prefixCls }: genStyleProps): CSSObject => ({
+const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
-  [`.${prefixCls}`]: {
+  const { dividerCls } = token;
-    ...resetComponent(token),
-    borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
 
-    // vertical
+  return {
-    '&-vertical': {
+    [dividerCls]: {
-      position: 'relative',
+      ...resetComponent(token),
-      top: '-0.06em',
+      borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
-      display: 'inline-block',
-      height: '0.9em',
-      margin: `0 ${token.dividerVerticalGutterMargin}px`,
-      verticalAlign: 'middle',
-      borderTop: 0,
-      borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
-    },
 
-    '&-horizontal': {
+      // vertical
-      display: 'flex',
+      '&-vertical': {
-      clear: 'both',
-      width: '100%',
-      minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
-      margin: `${token.dividerHorizontalGutterMargin}px 0`,
-    },
-
-    '&-horizontal&-with-text': {
-      display: 'flex',
-      margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
-      color: token.headingColor,
-      fontWeight: 500,
-      fontSize: token.fontSizeLG,
-      whiteSpace: 'nowrap',
-      textAlign: 'center',
-      borderBlockStart: `0 ${token.dividerBorderColor}`,
-
-      '&::before, &::after': {
         position: 'relative',
-        top: '50%',
+        top: '-0.06em',
-        width: '50%',
+        display: 'inline-block',
-        borderBlockStart: `${token.dividerBorderWidth}px solid transparent`,
+        height: '0.9em',
-        // Chrome not accept `inherit` in `border-top`
+        margin: `0 ${token.dividerVerticalGutterMargin}px`,
-        borderBlockStartColor: 'inherit',
+        verticalAlign: 'middle',
-        borderBlockEnd: 0,
+        borderTop: 0,
-        transform: 'translateY(50%)',
+        borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`,
-        content: "''",
-      },
-    },
-
-    '&-horizontal&-with-text-right': {
-      '&::before': {
-        top: '50%',
-        width: '95%',
       },
 
-      '&::after': {
+      '&-horizontal': {
-        top: '50%',
+        display: 'flex',
-        width: '5%',
+        clear: 'both',
-      },
-    },
-
-    [`.${prefixCls}-inner-text`]: {
-      display: 'inline-block',
-      padding: '0 1em',
-    },
-
-    '&-dashed': {
-      background: 'none',
-      borderColor: token.dividerBorderColor,
-      borderStyle: 'dashed',
-      borderWidth: 0,
-      borderBlockStart: `${token.dividerBorderWidth}px`,
-    },
-
-    '&-horizontal&-with-text&-dashed': {
-      '&::before, &::after': {
-        borderStyle: 'dashed none none',
-      },
-    },
-
-    '&-vertical&-dashed': {
-      borderWidth: `0 0 0 ${token.dividerBorderWidth}px`,
-    },
-
-    '&-plain&-with-text': {
-      color: token.textColor,
-      fontWeight: 'normal',
-      fontSize: token.fontSize,
-    },
-
-    '&-horizontal&-with-text-left&-no-default-orientation-margin-left': {
-      '&::before': {
-        width: 0,
-      },
-
-      '&::after': {
         width: '100%',
+        minWidth: '100%', // Fix https://github.com/ant-design/ant-design/issues/10914
+        margin: `${token.dividerHorizontalGutterMargin}px 0`,
       },
 
-      '.ant-divider-inner-text': {
+      '&-horizontal&-with-text': {
-        paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`,
+        display: 'flex',
+        margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
+        color: token.headingColor,
+        fontWeight: 500,
+        fontSize: token.fontSizeLG,
+        whiteSpace: 'nowrap',
+        textAlign: 'center',
+        borderBlockStart: `0 ${token.dividerBorderColor}`,
+
+        '&::before, &::after': {
+          position: 'relative',
+          top: '50%',
+          width: '50%',
+          borderBlockStart: `${token.dividerBorderWidth}px solid transparent`,
+          // Chrome not accept `inherit` in `border-top`
+          borderBlockStartColor: 'inherit',
+          borderBlockEnd: 0,
+          transform: 'translateY(50%)',
+          content: "''",
+        },
+      },
+
+      '&-horizontal&-with-text-right': {
+        '&::before': {
+          top: '50%',
+          width: '95%',
+        },
+
+        '&::after': {
+          top: '50%',
+          width: '5%',
+        },
+      },
+
+      [`${dividerCls}-inner-text`]: {
+        display: 'inline-block',
+        padding: '0 1em',
+      },
+
+      '&-dashed': {
+        background: 'none',
+        borderColor: token.dividerBorderColor,
+        borderStyle: 'dashed',
+        borderWidth: 0,
+        borderBlockStart: `${token.dividerBorderWidth}px`,
+      },
+
+      '&-horizontal&-with-text&-dashed': {
+        '&::before, &::after': {
+          borderStyle: 'dashed none none',
+        },
+      },
+
+      '&-vertical&-dashed': {
+        borderWidth: `0 0 0 ${token.dividerBorderWidth}px`,
+      },
+
+      '&-plain&-with-text': {
+        color: token.textColor,
+        fontWeight: 'normal',
+        fontSize: token.fontSize,
+      },
+
+      '&-horizontal&-with-text-left&-no-default-orientation-margin-left': {
+        '&::before': {
+          width: 0,
+        },
+
+        '&::after': {
+          width: '100%',
+        },
+
+        '.ant-divider-inner-text': {
+          paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`,
+        },
+      },
+
+      '&-horizontal&-with-text-right&-no-default-orientation-margin-right': {
+        '&::before': {
+          width: '100%',
+        },
+
+        '&::after': {
+          width: 0,
+        },
+
+        '.ant-divider-inner-text': {
+          paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`,
+        },
       },
     },
-
+  };
-    '&-horizontal&-with-text-right&-no-default-orientation-margin-right': {
+};
-      '&::before': {
-        width: '100%',
-      },
-
-      '&::after': {
-        width: 0,
-      },
-
-      '.ant-divider-inner-text': {
-        paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`,
-      },
-    },
-  },
-});
 
 // ============================== Export ==============================
 export default function useStyle(prefixCls: string): UseComponentStyleResult {
@@ -161,6 +162,8 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
   const dividerToken: DividerToken = {
     ...token,
 
+    dividerCls: `.${prefixCls}`,
+
     dividerBorderColor,
 
     dividerBorderWidth,
@@ -173,7 +176,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult {
 
   return [
     useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
-      genSharedDividerStyle({ token: dividerToken, prefixCls }),
+      genSharedDividerStyle(dividerToken),
     ]),
     hashId,
   ];

components/rate/style/index.tsx

@@ -1,11 +1,12 @@
 // deps-lint-skip-all
-import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { CSSObject } from '@ant-design/cssinjs';
 import {
   DerivativeToken,
   resetComponent,
   UseComponentStyleResult,
   useStyleRegister,
   useToken,
+  GenerateStyle,
 } from '../../_util/theme';
 
 interface RateToken extends DerivativeToken {
@@ -16,7 +17,7 @@ interface RateToken extends DerivativeToken {
   iconPrefixCls: string;
 }
 
-const genRateStarStyle = (token: RateToken): CSSObject => {
+const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
   const { rateCls } = token;
 
   return {
@@ -84,7 +85,7 @@ const genRateRtlStyle = (token: RateToken): CSSObject => ({
   },
 });
 
-const genRateStyle = (token: RateToken): CSSInterpolation => {
+const genRateStyle: GenerateStyle<RateToken> = token => {
   const { rateCls } = token;
 
   return {

components/result/style/index.tsx

@@ -1,13 +1,17 @@
 // deps-lint-skip-all
-import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { CSSObject } from '@ant-design/cssinjs';
 import {
   DerivativeToken,
   useStyleRegister,
   useToken,
   UseComponentStyleResult,
+  GenerateStyle,
 } from '../../_util/theme';
 
 interface ResultToken extends DerivativeToken {
+  resultCls: string;
+  dotIconPrefixCls: string;
+
   resultTitleFontSize: number;
   resultSubtitleFontSize: number;
   resultIconFontSize: number;
@@ -21,95 +25,101 @@ interface ResultToken extends DerivativeToken {
 }
 
 // ============================== Styles ==============================
-const genBaseStyle = (
+const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
-  resultCls: string,
+  const { resultCls, dotIconPrefixCls } = token;
-  dotIconPrefixCls: string,
-  token: ResultToken,
-): CSSObject => ({
-  // Result
-  [resultCls]: {
-    padding: `${token.padding * 3}px ${token.padding * 2}px`,
-  },
 
-  // Exception Status image
+  return {
-  [`${resultCls} ${resultCls}-image`]: {
+    // Result
-    // FIXME: hard code
+    [resultCls]: {
-    width: 250,
+      padding: `${token.padding * 3}px ${token.padding * 2}px`,
-    height: 295,
-    margin: 'auto',
-  },
-
-  [`${resultCls} ${resultCls}-icon`]: {
-    marginBottom: token.padding * 1.5,
-    textAlign: 'center',
-
-    [`& > ${dotIconPrefixCls}`]: {
-      fontSize: token.resultIconFontSize,
     },
-  },
 
-  [`${resultCls} ${resultCls}-title`]: {
+    // Exception Status image
-    color: token.headingColor,
+    [`${resultCls} ${resultCls}-image`]: {
-    fontSize: token.resultTitleFontSize,
+      // FIXME: hard code
-    // FIXME: hard code
+      width: 250,
-    lineHeight: 1.8,
+      height: 295,
-    textAlign: 'center',
+      margin: 'auto',
-  },
+    },
 
-  [`${resultCls} ${resultCls}-subtitle`]: {
+    [`${resultCls} ${resultCls}-icon`]: {
-    color: token.textColorSecondary,
+      marginBottom: token.padding * 1.5,
-    fontSize: token.resultSubtitleFontSize,
+      textAlign: 'center',
-    // FIXME: hard code
-    lineHeight: 1.6,
-    textAlign: 'center',
-  },
 
-  [`${resultCls} ${resultCls}-content`]: {
+      [`& > ${dotIconPrefixCls}`]: {
-    marginTop: token.padding * 1.5,
+        fontSize: token.resultIconFontSize,
-    padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
-    backgroundColor: token.backgroundLight,
-  },
-
-  [`${resultCls} ${resultCls}-extra`]: {
-    margin: token.resultExtraMargin,
-    textAlign: 'center',
-
-    '& > *': {
-      marginInlineEnd: token.paddingXS,
-
-      '&:last-child': {
-        marginInlineEnd: 0,
       },
     },
-  },
-});
 
-const genStatusIconStyle = (
+    [`${resultCls} ${resultCls}-title`]: {
-  resultCls: string,
+      color: token.headingColor,
-  iconPrefixCls: string,
+      fontSize: token.resultTitleFontSize,
-  token: ResultToken,
+      // FIXME: hard code
-): CSSObject => ({
+      lineHeight: 1.8,
-  [`${resultCls}-success ${resultCls}-icon > ${iconPrefixCls}`]: {
+      textAlign: 'center',
-    color: token.resultSuccessIconColor,
+    },
-  },
-  [`${resultCls}-error ${resultCls}-icon > ${iconPrefixCls}`]: {
-    color: token.resultErrorIconColor,
-  },
-  [`${resultCls}-info ${resultCls}-icon > ${iconPrefixCls}`]: {
-    color: token.resultInfoIconColor,
-  },
-  [`${resultCls}-warning ${resultCls}-icon > ${iconPrefixCls}`]: {
-    color: token.resultWarningIconColor,
-  },
-});
 
-export const genResultStyle = (
+    [`${resultCls} ${resultCls}-subtitle`]: {
+      color: token.textColorSecondary,
+      fontSize: token.resultSubtitleFontSize,
+      // FIXME: hard code
+      lineHeight: 1.6,
+      textAlign: 'center',
+    },
+
+    [`${resultCls} ${resultCls}-content`]: {
+      marginTop: token.padding * 1.5,
+      padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`,
+      backgroundColor: token.backgroundLight,
+    },
+
+    [`${resultCls} ${resultCls}-extra`]: {
+      margin: token.resultExtraMargin,
+      textAlign: 'center',
+
+      '& > *': {
+        marginInlineEnd: token.paddingXS,
+
+        '&:last-child': {
+          marginInlineEnd: 0,
+        },
+      },
+    },
+  };
+};
+
+const genStatusIconStyle: GenerateStyle<ResultToken> = token => {
+  const { resultCls, dotIconPrefixCls } = token;
+
+  return {
+    [`${resultCls}-success ${resultCls}-icon > ${dotIconPrefixCls}`]: {
+      color: token.resultSuccessIconColor,
+    },
+    [`${resultCls}-error ${resultCls}-icon > ${dotIconPrefixCls}`]: {
+      color: token.resultErrorIconColor,
+    },
+    [`${resultCls}-info ${resultCls}-icon > ${dotIconPrefixCls}`]: {
+      color: token.resultInfoIconColor,
+    },
+    [`${resultCls}-warning ${resultCls}-icon > ${dotIconPrefixCls}`]: {
+      color: token.resultWarningIconColor,
+    },
+  };
+};
+
+const genResultStyle: GenerateStyle<ResultToken> = token => [
+  genBaseStyle(token),
+  genStatusIconStyle(token),
+];
+
+// ============================== Export ==============================
+const getStyle: GenerateStyle<ResultToken> = token => genResultStyle(token);
+
+export default function useStyle(
   prefixCls: string,
   iconPrefixCls: string,
-  token: DerivativeToken,
+): UseComponentStyleResult {
-): CSSInterpolation => {
+  const [theme, token, hashId] = useToken();
-  const resultCls = `.${prefixCls}`;
-  const dotIconPrefixCls = `.${iconPrefixCls}`;
 
   // compact 20
   // FIXME: maybe we need a new token for fontSize 12px
@@ -125,8 +135,10 @@ export const genResultStyle = (
   const resultSuccessIconColor = token.successColor;
   const resultWarningIconColor = token.warningColor;
 
-  const resultToken = {
+  const resultToken: ResultToken = {
     ...token,
+    resultCls: `.${prefixCls}`,
+    dotIconPrefixCls: `.${iconPrefixCls}`,
     resultTitleFontSize,
     resultSubtitleFontSize,
     resultIconFontSize,
@@ -138,26 +150,7 @@ export const genResultStyle = (
   };
 
   return [
-    genBaseStyle(resultCls, dotIconPrefixCls, resultToken),
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => getStyle(resultToken)),
-    genStatusIconStyle(resultCls, dotIconPrefixCls, resultToken),
-  ];
-};
-
-// ============================== Export ==============================
-export function getStyle(prefixCls: string, iconPrefixCls: string, token: DerivativeToken) {
-  return [genResultStyle(prefixCls, iconPrefixCls, token)];
-}
-
-export default function useStyle(
-  prefixCls: string,
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
-  return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
-      getStyle(prefixCls, iconPrefixCls, token),
-    ),
     hashId,
   ];
 }

components/select/style/dropdown.tsx

@@ -1,4 +1,4 @@
-import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { CSSObject } from '@ant-design/cssinjs';
 import {
   resetComponent,
   initSlideMotion,
@@ -6,10 +6,11 @@ import {
   slideUpOut,
   slideDownIn,
   slideDownOut,
+  GenerateStyle,
 } from '../../_util/theme';
 import type { SelectToken } from '.';
 
-const genItemStyle = (token: SelectToken): CSSObject => {
+const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
   const { controlPaddingHorizontal } = token;
 
   return {
@@ -26,7 +27,7 @@ const genItemStyle = (token: SelectToken): CSSObject => {
   };
 };
 
-export default function genSingleStyle(token: SelectToken, hashId: string): CSSInterpolation {
+const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
   const { rootPrefixCls, antCls, selectCls } = token;
 
   const selectItemCls = `${selectCls}-item`;
@@ -152,11 +153,13 @@ export default function genSingleStyle(token: SelectToken, hashId: string): CSSI
     },
 
     // Follow code may reuse in other components
-    initSlideMotion(hashId, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
+    initSlideMotion(hashId!, rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
-    initSlideMotion(hashId, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
+    initSlideMotion(hashId!, rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
     slideUpIn,
     slideUpOut,
     slideDownIn,
     slideDownOut,
   ];
-}
+};
+
+export default genSingleStyle;

components/select/style/index.tsx

@@ -13,6 +13,7 @@ import {
   resetComponent,
   resetIcon,
   UseComponentStyleResult,
+  GenerateStyle,
 } from '../../_util/theme';
 import genSingleStyle from './single';
 import genMultipleStyle from './multiple';
@@ -27,7 +28,7 @@ export type SelectToken = DerivativeToken & {
 };
 
 // ============================= Selector =============================
-const genSelectorStyle = (token: SelectToken): CSSObject => {
+const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
   const { selectCls } = token;
 
   return {
@@ -112,7 +113,7 @@ const genStatusStyle = (
 
 // ============================== Styles ==============================
 // /* Reset search input style */
-const getSearchInputWithoutBorderStyle = (token: SelectToken): CSSObject => {
+const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = token => {
   const { selectCls } = token;
 
   return {
@@ -133,7 +134,7 @@ const getSearchInputWithoutBorderStyle = (token: SelectToken): CSSObject => {
 };
 
 // =============================== Base ===============================
-const genBaseStyle = (token: SelectToken): CSSObject => {
+const genBaseStyle: GenerateStyle<SelectToken> = token => {
   const { selectCls, iconPrefixCls, inputPaddingHorizontalBase } = token;
 
   return {
@@ -269,7 +270,7 @@ const genBaseStyle = (token: SelectToken): CSSObject => {
 };
 
 // ============================== Styles ==============================
-export const genSelectStyle = (
+const genSelectStyle = (
   rootPrefixCls: string,
   prefixCls: string,
   iconPrefixCls: string,

components/tree-select/style/index.tsx

@@ -7,12 +7,12 @@
 // import '../../empty/style';
 
 // deps-lint-skip-all
-import { CSSInterpolation } from '@ant-design/cssinjs';
 import {
   DerivativeToken,
   useStyleRegister,
   useToken,
   UseComponentStyleResult,
+  GenerateStyle,
 } from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { genTreeStyle } from '../../tree/style';
@@ -23,7 +23,7 @@ interface TreeSelectToken extends DerivativeToken {
 }
 
 // =============================== Base ===============================
-const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation => {
+const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
   const { selectCls, treePrefixCls } = token;
   const treeCls = `.${treePrefixCls}`;
 
@@ -38,7 +38,7 @@ const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation
         },
 
         // ====================== Tree ======================
-        genTreeStyle(treePrefixCls, token, hashId),
+        genTreeStyle(treePrefixCls, token, hashId!),
         {
           [treeCls]: {
             borderRadius: 0,
@@ -55,7 +55,7 @@ const genBaseStyle = (token: TreeSelectToken, hashId: string): CSSInterpolation
         },
 
         // ==================== Checkbox ====================
-        getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId),
+        getCheckboxStyle(`${treePrefixCls}-checkbox`, token, hashId!),
 
         // ====================== RTL =======================
         {