refactor: select use genHook (#34891)

* refactor: select use genHook * chore: code clean * refactor: tree-select support genHook * chore: code clean * chore: code clean * fix: tree style
2025-01-18 14:13:37 +08:00 · 2022-04-07 12:20:34 +08:00 · 2022-04-07 12:20:34 +08:00 · 821ac5bc97
commit 821ac5bc97
parent 8cb60ad7f1
9 changed files with 116 additions and 159 deletions
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@ -50,6 +50,7 @@ export interface OverrideToken {
  Pagination?: {};
  Select?: SelectComponentToken;
  Slider?: SliderComponentToken;
+  TreeSelect?: {};
  Typography?: TypographyComponentToken;
 }

--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -144,7 +144,6 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
    direction: rootDirection,
    // virtual,
    // dropdownMatchSelectWidth,
-    iconPrefixCls,
  } = useContext(ConfigContext);

  const mergedDirection = direction || rootDirection;
@ -182,7 +181,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
  const prefixCls = getPrefixCls('select', customizePrefixCls);
  const cascaderPrefixCls = getPrefixCls('cascader', customizePrefixCls);

-  const [wrapSelectSSR, hashId] = useSelectStyle(rootPrefixCls, prefixCls, iconPrefixCls);
+  const [wrapSelectSSR, hashId] = useSelectStyle(prefixCls);
  const [wrapCascaderSSR] = useStyle(cascaderPrefixCls);

  // =================== Dropdown ====================
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@ -73,7 +73,6 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
-    iconPrefixCls,
    renderEmpty,
    direction,
    virtual,
@ -84,7 +83,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
  const prefixCls = getPrefixCls('select', customizePrefixCls);
  const rootPrefixCls = getPrefixCls();

-  const [wrapSSR, hashId] = useStyle(rootPrefixCls, prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);

  const mode = React.useMemo(() => {
    const { mode: m } = props as InternalSelectProps<OptionType>;
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -28,13 +28,13 @@ const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
 };

 const genSingleStyle: GenerateStyle<SelectToken> = (token, hashId) => {
-  const { rootPrefixCls, antCls, selectCls } = token;
+  const { rootPrefixCls, antCls, componentCls } = token;

-  const selectItemCls = `${selectCls}-item`;
+  const selectItemCls = `${componentCls}-item`;

  return [
    {
-      [`${selectCls}-dropdown`]: {
+      [`${componentCls}-dropdown`]: {
        // ========================== Popup ==========================
        ...resetComponent(token),

--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -7,13 +7,11 @@ import '../../empty/style';
 // deps-lint-skip-all
 import { CSSObject } from '@ant-design/cssinjs';
 import {
-  DerivativeToken,
-  useStyleRegister,
-  useToken,
  resetComponent,
  resetIcon,
-  UseComponentStyleResult,
  GenerateStyle,
+  genComponentStyleHook,
+  FullToken,
 } from '../../_util/theme';
 import genSingleStyle from './single';
 import genMultipleStyle from './multiple';
@ -23,17 +21,14 @@ export interface ComponentToken {
  zIndexDropdown: number;
 }

-export interface SelectToken extends DerivativeToken, ComponentToken {
+export interface SelectToken extends FullToken<'Select'> {
  rootPrefixCls: string;
-  antCls: string;
-  selectCls: string;
-  iconPrefixCls: string;
  inputPaddingHorizontalBase: number;
 }

 // ============================= Selector =============================
 const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
-  const { selectCls } = token;
+  const { componentCls } = token;

  return {
    position: 'relative',
@ -46,7 +41,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
      cursor: 'pointer',
    },

-    [`${selectCls}-show-search&`]: {
+    [`${componentCls}-show-search&`]: {
      cursor: 'text',

      input: {
@ -54,12 +49,12 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
      },
    },

-    [`${selectCls}-disabled&`]: {
+    [`${componentCls}-disabled&`]: {
      color: token.colorTextDisabled,
      background: token.colorBgComponentDisabled,
      cursor: 'not-allowed',

-      [`${selectCls}-multiple&`]: {
+      [`${componentCls}-multiple&`]: {
        background: token.colorBgComponentDisabled,
      },

@ -74,7 +69,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
 const genStatusStyle = (
  rootSelectCls: string,
  token: {
-    selectCls: string;
+    componentCls: string;
    borderHoverColor: string;
    outlineColor: string;
    controlOutlineWidth: number;
@ -82,11 +77,11 @@ const genStatusStyle = (
  },
  overwriteDefaultBorder: boolean = false,
 ): CSSObject => {
-  const { selectCls, borderHoverColor, outlineColor } = token;
+  const { componentCls, borderHoverColor, outlineColor } = token;

  const overwriteStyle: CSSObject = overwriteDefaultBorder
    ? {
-        [`${selectCls}-selector`]: {
+        [`${componentCls}-selector`]: {
          borderColor: borderHoverColor,
        },
      }
@ -94,17 +89,17 @@ const genStatusStyle = (

  return {
    [rootSelectCls]: {
-      [`&:not(${selectCls}-disabled):not(${selectCls}-customize-input)`]: {
+      [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input)`]: {
        ...overwriteStyle,

-        [`${selectCls}-focused& ${selectCls}-selector`]: {
+        [`${componentCls}-focused& ${componentCls}-selector`]: {
          borderColor: borderHoverColor,
          boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
          borderInlineEndWidth: `${token.controlLineWidth}px !important`,
          outline: 0,
        },

-        [`&:hover ${selectCls}-selector`]: {
+        [`&:hover ${componentCls}-selector`]: {
          borderColor: borderHoverColor,
          borderInlineEndWidth: `${token.controlLineWidth}px !important`,
        },
@ -116,10 +111,10 @@ const genStatusStyle = (
 // ============================== Styles ==============================
 // /* Reset search input style */
 const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> = token => {
-  const { selectCls } = token;
+  const { componentCls } = token;

  return {
-    [`${selectCls}-selection-search-input`]: {
+    [`${componentCls}-selection-search-input`]: {
      margin: 0,
      padding: 0,
      background: 'transparent',
@ -137,16 +132,16 @@ const getSearchInputWithoutBorderStyle: GenerateStyle<SelectToken, CSSObject> =

 // =============================== Base ===============================
 const genBaseStyle: GenerateStyle<SelectToken> = token => {
-  const { selectCls, iconPrefixCls, inputPaddingHorizontalBase } = token;
+  const { componentCls, inputPaddingHorizontalBase, iconCls } = token;

  return {
-    [selectCls]: {
+    [componentCls]: {
      ...resetComponent(token),
      position: 'relative',
      display: 'inline-block',
      cursor: 'pointer',

-      [`&:not(&-customize-input) ${selectCls}-selector`]: {
+      [`&:not(&-customize-input) ${componentCls}-selector`]: {
        ...genSelectorStyle(token),
        ...getSearchInputWithoutBorderStyle(token),
      },
@ -156,7 +151,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
      // },

      // ======================== Selection ========================
-      [`${selectCls}-selection-item`]: {
+      [`${componentCls}-selection-item`]: {
        flex: 1,
        overflow: 'hidden',
        fontWeight: 'normal',
@ -165,7 +160,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
      },

      // ======================= Placeholder =======================
-      [`${selectCls}-selection-placeholder`]: {
+      [`${componentCls}-selection-placeholder`]: {
        flex: 1,
        overflow: 'hidden',
        color: token.colorPlaceholder,
@ -175,7 +170,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
      },

      // ========================== Arrow ==========================
-      [`${selectCls}-arrow`]: {
+      [`${componentCls}-arrow`]: {
        ...resetIcon(),
        position: 'absolute',
        top: '50%',
@ -191,7 +186,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
        display: 'flex',
        alignItems: 'center',

-        [`.${iconPrefixCls}`]: {
+        [iconCls]: {
          verticalAlign: 'top',
          transition: `transform ${token.motionDurationSlow}`,

@ -199,12 +194,12 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
            verticalAlign: 'top',
          },

-          [`&:not(${selectCls}-suffix)`]: {
+          [`&:not(${componentCls}-suffix)`]: {
            pointerEvents: 'auto',
          },
        },

-        [`${selectCls}-disabled &`]: {
+        [`${componentCls}-disabled &`]: {
          cursor: 'not-allowed',
        },

@ -214,7 +209,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
      },

      // ========================== Clear ==========================
-      [`${selectCls}-clear`]: {
+      [`${componentCls}-clear`]: {
        position: 'absolute',
        top: '50%',
        insetInlineStart: 'auto',
@ -246,15 +241,15 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
      },

      '&:hover': {
-        [`${selectCls}-clear`]: {
+        [`${componentCls}-clear`]: {
          opacity: 1,
        },
      },
    },

    // ========================= Feedback ==========================
-    [`${selectCls}-has-feedback`]: {
-      [`${selectCls}-clear`]: {
+    [`${componentCls}-has-feedback`]: {
+      [`${componentCls}-clear`]: {
        insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS,
      },
    },
@ -263,13 +258,13 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {

 // ============================== Styles ==============================
 const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
-  const { selectCls } = token;
+  const { componentCls } = token;

  return [
    {
-      [selectCls]: {
+      [componentCls]: {
        // ==================== BorderLess ====================
-        [`&-borderless ${selectCls}-selector`]: {
+        [`&-borderless ${componentCls}-selector`]: {
          backgroundColor: `transparent !important`,
          borderColor: `transparent !important`,
          boxShadow: `none !important`,
@ -301,7 +296,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
    // ==                       RTL                       ==
    // =====================================================
    {
-      [`${selectCls}-rtl`]: {
+      [`${componentCls}-rtl`]: {
        direction: 'rtl',
      },
    },
@ -309,13 +304,13 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
    // =====================================================
    // ==                     Status                      ==
    // =====================================================
-    genStatusStyle(selectCls, {
+    genStatusStyle(componentCls, {
      ...token,
      borderHoverColor: token.colorPrimaryHover,
      outlineColor: token.colorPrimaryOutline,
    }),
    genStatusStyle(
-      `${selectCls}-status-error`,
+      `${componentCls}-status-error`,
      {
        ...token,
        borderHoverColor: token.colorErrorHover,
@ -324,7 +319,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
      true,
    ),
    genStatusStyle(
-      `${selectCls}-status-warning`,
+      `${componentCls}-status-warning`,
      {
        ...token,
        borderHoverColor: token.colorWarningHover,
@ -336,37 +331,18 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token, hashId) => {
 };

 // ============================== Export ==============================
-export default function useStyle(
-  rootPrefixCls: string,
-  prefixCls: string,
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
+export default genComponentStyleHook(
+  'Select',
+  (token, { rootPrefixCls, hashId }) => {
+    const selectToken: SelectToken = {
+      ...token,
+      rootPrefixCls,
+      inputPaddingHorizontalBase: token.controlPaddingHorizontal - 1,
+    };

-  return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => {
-      const { zIndexPopup, Select } = token;
-
-      const antCls = `.${rootPrefixCls}`;
-      const selectCls = `.${prefixCls}`;
-
-      const inputPaddingHorizontalBase = token.controlPaddingHorizontal - 1;
-
-      const selectToken: SelectToken = {
-        ...token,
-
-        rootPrefixCls,
-        antCls,
-        selectCls,
-        iconPrefixCls,
-        inputPaddingHorizontalBase,
-        zIndexDropdown: zIndexPopup + 50,
-
-        ...Select,
-      };
-
-      return [genSelectStyle(selectToken, hashId)];
-    }),
-    hashId,
-  ];
-}
+    return [genSelectStyle(selectToken, hashId)];
+  },
+  token => ({
+    zIndexDropdown: token.zIndexPopup + 50,
+  }),
+);
--- a/components/select/style/multiple.tsx
+++ b/components/select/style/multiple.tsx
@ -15,17 +15,17 @@ function getSelectItemStyle({
 }

 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
-  const { selectCls, iconPrefixCls } = token;
+  const { componentCls, iconCls } = token;

-  const selectOverflowPrefixCls = `${selectCls}-selection-overflow`;
+  const selectOverflowPrefixCls = `${componentCls}-selection-overflow`;

  const selectItemHeight = token.controlHeightSM;
  const [selectItemDist] = getSelectItemStyle(token);

-  const suffixCls = suffix ? `${selectCls}-${suffix}` : '';
+  const suffixCls = suffix ? `${componentCls}-${suffix}` : '';

  return {
-    [`${selectCls}-multiple${suffixCls}`]: {
+    [`${componentCls}-multiple${suffixCls}`]: {
      fontSize: token.fontSize,

      /**
@ -49,18 +49,18 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
      },

      // ========================= Selector =========================
-      [`${selectCls}-selector`]: {
+      [`${componentCls}-selector`]: {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        // Multiple is little different that horizontal is follow the vertical
        padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,

-        [`${selectCls}-show-search&`]: {
+        [`${componentCls}-show-search&`]: {
          cursor: 'text',
        },

-        [`${selectCls}-disabled&`]: {
+        [`${componentCls}-disabled&`]: {
          background: token.colorBgComponentDisabled,
          cursor: 'not-allowed',
        },
@ -75,14 +75,14 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
      },

      [`
-        &${selectCls}-show-arrow ${selectCls}-selector,
-        &${selectCls}-allow-clear ${selectCls}-selector
+        &${componentCls}-show-arrow ${componentCls}-selector,
+        &${componentCls}-allow-clear ${componentCls}-selector
      `]: {
        paddingInlineEnd: token.fontSizeIcon + token.controlPaddingHorizontal,
      },

      // ======================== Selections ========================
-      [`${selectCls}-selection-item`]: {
+      [`${componentCls}-selection-item`]: {
        position: 'relative',
        display: 'flex',
        flex: 'none',
@ -102,7 +102,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        paddingInlineStart: token.paddingXS,
        paddingInlineEnd: token.paddingXS / 2,

-        [`${selectCls}-disabled&`]: {
+        [`${componentCls}-disabled&`]: {
          color: token.colorTextDisabled,
          borderColor: token.colorBorder,
          cursor: 'not-allowed',
@ -127,7 +127,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
          lineHeight: 'inherit',
          cursor: 'pointer',

-          [`> .${iconPrefixCls}`]: {
+          [`> ${iconCls}`]: {
            verticalAlign: '-0.2em',
          },

@ -139,12 +139,12 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {

      // ========================== Input ==========================
      [`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item`]: {
-        [`${selectCls}-selection-search`]: {
+        [`${componentCls}-selection-search`]: {
          marginInlineStart: 0,
        },
      },

-      [`${selectCls}-selection-search`]: {
+      [`${componentCls}-selection-search`]: {
        display: 'inline-flex',
        position: 'relative',
        maxWidth: '100%',
@ -177,7 +177,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
      },

      // ======================= Placeholder =======================
-      [`${selectCls}-selection-placeholder `]: {
+      [`${componentCls}-selection-placeholder `]: {
        position: 'absolute',
        top: '50%',
        insetInlineStart: token.inputPaddingHorizontalBase,
@ -190,7 +190,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 }

 export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
-  const { selectCls } = token;
+  const { componentCls } = token;

  const smallToken: SelectToken = {
    ...token,
@ -207,14 +207,14 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {

    // Padding
    {
-      [`${selectCls}-multiple${selectCls}-sm`]: {
-        [`${selectCls}-selection-placeholder`]: {
+      [`${componentCls}-multiple${componentCls}-sm`]: {
+        [`${componentCls}-selection-placeholder`]: {
          insetInlineStart: token.controlPaddingHorizontalSM - token.controlLineWidth,
          insetInlineEnd: 'auto',
        },

        // https://github.com/ant-design/ant-design/issues/29559
-        [`${selectCls}-selection-search`]: {
+        [`${componentCls}-selection-search`]: {
          marginInlineStart: smSelectItemMargin,
        },
      },
--- a/components/select/style/single.tsx
+++ b/components/select/style/single.tsx
@ -2,22 +2,22 @@ import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';

 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
-  const { selectCls, inputPaddingHorizontalBase } = token;
+  const { componentCls, inputPaddingHorizontalBase } = token;

  const selectHeightWithoutBorder = token.controlHeight - token.controlLineWidth * 2;

  const selectionItemPadding = Math.ceil(token.fontSize * 1.25);

-  const suffixCls = suffix ? `${selectCls}-${suffix}` : '';
+  const suffixCls = suffix ? `${componentCls}-${suffix}` : '';

  return {
-    [`${selectCls}-single${suffixCls}`]: {
+    [`${componentCls}-single${suffixCls}`]: {
      fontSize: token.fontSize,

      // ========================= Selector =========================
-      [`${selectCls}-selector`]: {
+      [`${componentCls}-selector`]: {
        display: 'flex',
-        [`${selectCls}-selection-search`]: {
+        [`${componentCls}-selection-search`]: {
          position: 'absolute',
          top: 0,
          insetInlineStart: inputPaddingHorizontalBase,
@ -30,8 +30,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        },

        [`
-          ${selectCls}-selection-item,
-          ${selectCls}-selection-placeholder
+          ${componentCls}-selection-item,
+          ${componentCls}-selection-placeholder
        `]: {
          padding: 0,
          lineHeight: `${selectHeightWithoutBorder}px`,
@ -43,12 +43,12 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
          },
        },

-        [`${selectCls}-selection-item`]: {
+        [`${componentCls}-selection-item`]: {
          position: 'relative',
          userSelect: 'none',
        },

-        [`${selectCls}-selection-placeholder`]: {
+        [`${componentCls}-selection-placeholder`]: {
          transition: 'none',
          pointerEvents: 'none',
        },
@ -57,9 +57,9 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        [[
          '&:after',
          /* For '' value baseline align */
-          `${selectCls}-selection-item:after`,
+          `${componentCls}-selection-item:after`,
          /* For undefined value baseline align */
-          `${selectCls}-selection-placeholder:after`,
+          `${componentCls}-selection-placeholder:after`,
        ].join(',')]: {
          display: 'inline-block',
          width: 0,
@ -69,27 +69,27 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
      },

      [`
-        &${selectCls}-show-arrow ${selectCls}-selection-item,
-        &${selectCls}-show-arrow ${selectCls}-selection-placeholder
+        &${componentCls}-show-arrow ${componentCls}-selection-item,
+        &${componentCls}-show-arrow ${componentCls}-selection-placeholder
      `]: {
        paddingInlineEnd: selectionItemPadding,
      },

      // Opacity selection if open
-      [`&${selectCls}-open ${selectCls}-selection-item`]: {
+      [`&${componentCls}-open ${componentCls}-selection-item`]: {
        color: token.colorPlaceholder,
      },

      // ========================== Input ==========================
      // We only change the style of non-customize input which is only support by `combobox` mode.
      // Not customize
-      [`&:not(${selectCls}-customize-input)`]: {
-        [`${selectCls}-selector`]: {
+      [`&:not(${componentCls}-customize-input)`]: {
+        [`${componentCls}-selector`]: {
          width: '100%',
          height: token.controlHeight,
          padding: `0 ${inputPaddingHorizontalBase}px`,

-          [`${selectCls}-selection-search-input`]: {
+          [`${componentCls}-selection-search-input`]: {
            height: selectHeightWithoutBorder,
          },

@ -99,18 +99,18 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        },
      },

-      [`&${selectCls}-customize-input`]: {
-        [`${selectCls}-selector`]: {
+      [`&${componentCls}-customize-input`]: {
+        [`${componentCls}-selector`]: {
          '&:after': {
            display: 'none',
          },

-          [`${selectCls}-selection-search`]: {
+          [`${componentCls}-selection-search`]: {
            position: 'static',
            width: '100%',
          },

-          [`${selectCls}-selection-placeholder`]: {
+          [`${componentCls}-selection-placeholder`]: {
            position: 'absolute',
            insetInlineStart: 0,
            insetInlineEnd: 0,
@ -127,7 +127,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 }

 export default function genSingleStyle(token: SelectToken): CSSInterpolation {
-  const { selectCls } = token;
+  const { componentCls } = token;

  const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.controlLineWidth;

@ -146,26 +146,26 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {

    // padding
    {
-      [`${selectCls}-single${selectCls}-sm`]: {
-        [`&:not(${selectCls}-customize-input)`]: {
-          [`${selectCls}-selection-search`]: {
+      [`${componentCls}-single${componentCls}-sm`]: {
+        [`&:not(${componentCls}-customize-input)`]: {
+          [`${componentCls}-selection-search`]: {
            insetInlineStart: inputPaddingHorizontalSM,
            insetInlineEnd: inputPaddingHorizontalSM,
          },

-          [`${selectCls}-selector`]: {
+          [`${componentCls}-selector`]: {
            padding: `0 ${inputPaddingHorizontalSM}px`,
          },

          // With arrow should provides `padding-right` to show the arrow
-          [`&${selectCls}-show-arrow ${selectCls}-selection-search`]: {
+          [`&${componentCls}-show-arrow ${componentCls}-selection-search`]: {
            insetInlineStart: 'auto',
            insetInlineEnd: inputPaddingHorizontalSM + token.fontSize * 1.5,
          },

          [`
-            &${selectCls}-show-arrow ${selectCls}-selection-item,
-            &${selectCls}-show-arrow ${selectCls}-selection-placeholder
+            &${componentCls}-show-arrow ${componentCls}-selection-item,
+            &${componentCls}-show-arrow ${componentCls}-selection-placeholder
          `]: {
            paddingInlineEnd: token.fontSize * 1.5,
          },
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@ -86,7 +86,6 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
    direction,
    virtual,
    dropdownMatchSelectWidth,
-    iconPrefixCls,
  } = React.useContext(ConfigContext);
  const size = React.useContext(SizeContext);

@ -101,7 +100,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
  const treePrefixCls = getPrefixCls('select-tree', customizePrefixCls);
  const treeSelectPrefixCls = getPrefixCls('tree-select', customizePrefixCls);

-  const [wrapSelectSSR, hashId] = useSelectStyle(rootPrefixCls, prefixCls, iconPrefixCls);
+  const [wrapSelectSSR, hashId] = useSelectStyle(prefixCls);
  const [wrapTreeSelectSSR] = useStyle(treeSelectPrefixCls, treePrefixCls);

  const mergedDropdownClassName = classNames(
--- a/components/tree-select/style/index.tsx
+++ b/components/tree-select/style/index.tsx
@ -7,24 +7,17 @@
 // import '../../empty/style';

 // deps-lint-skip-all
-import {
-  DerivativeToken,
-  useStyleRegister,
-  useToken,
-  UseComponentStyleResult,
-  GenerateStyle,
-} from '../../_util/theme';
+import { GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { genTreeStyle } from '../../tree/style';

-interface TreeSelectToken extends DerivativeToken {
-  selectCls: string;
+interface TreeSelectToken extends FullToken<'TreeSelect'> {
  treePrefixCls: string;
 }

 // =============================== Base ===============================
 const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
-  const { selectCls, treePrefixCls } = token;
+  const { componentCls, treePrefixCls } = token;
  const treeCls = `.${treePrefixCls}`;

  return [
@ -32,7 +25,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
    // ==                     Dropdown                     ==
    // ======================================================
    {
-      [`${selectCls}-dropdown`]: [
+      [`${componentCls}-dropdown`]: [
        {
          padding: `${token.paddingXS}px ${token.paddingXS / 2}px`,
        },
@ -75,22 +68,12 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token, hashId) => {
 };

 // ============================== Export ==============================
-export default function useStyle(
-  prefixCls: string,
-  treePrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
-  const treeSelectToken: TreeSelectToken = {
-    ...token,
-    selectCls: `.${prefixCls}`,
-    treePrefixCls,
-  };
-
-  return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
-      genBaseStyle(treeSelectToken, hashId),
-    ]),
-    hashId,
-  ];
+export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
+  return genComponentStyleHook('TreeSelect', (token, { hashId }) => {
+    const treeSelectToken: TreeSelectToken = {
+      ...token,
+      treePrefixCls,
+    };
+    return [genBaseStyle(treeSelectToken, hashId)];
+  })(prefixCls);
 }