feat: ConfigProvider support variant (#49535)

* feat: ConfigProvider support variant

* docs: add docs for variant

* feat: support config all components variant

* chore: fix lint

* chore: add test

* test: add test

components/cascader/index.tsx

@@ -25,7 +25,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../form/hooks/useVariants';
+import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import mergedBuiltinPlacements from '../select/mergedBuiltinPlacements';
 import useSelectStyle from '../select/style';
@@ -224,7 +224,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
-  const [variant, enableVariantCls] = useVariant(customVariant, bordered);
+  const [variant, enableVariantCls] = useVariant('cascader', customVariant, bordered);
 
   // =================== No Found ====================
   const mergedNotFoundContent = notFoundContent || renderEmpty?.('Cascader') || (

components/config-provider/__tests__/index.test.tsx

@@ -10,6 +10,7 @@ import Button from '../../button';
 import Input from '../../input';
 import Select from '../../select';
 import Table from '../../table';
+import Form from '../../form';
 
 describe('ConfigProvider', () => {
   mountTest(() => (
@@ -148,4 +149,40 @@ describe('ConfigProvider', () => {
     errSpy.mockRestore();
     warnSpy.mockRestore();
   });
+
+  it('should support variant', () => {
+    const { container } = render(
+      <>
+        <ConfigProvider variant="filled">
+          <Input id="variant-input-1" />
+        </ConfigProvider>
+        <ConfigProvider variant="filled">
+          <Input id="variant-input-2" variant="outlined" />
+        </ConfigProvider>
+        <ConfigProvider variant="filled">
+          <Form variant="borderless">
+            <Input id="variant-input-3" />
+          </Form>
+        </ConfigProvider>
+        <ConfigProvider input={{ variant: 'filled' }}>
+          <Input id="variant-input-4" />
+        </ConfigProvider>
+        <ConfigProvider variant="borderless" input={{ variant: 'filled' }}>
+          <Input id="variant-input-5" />
+        </ConfigProvider>
+        <ConfigProvider variant="borderless" input={{ variant: 'filled' }}>
+          <Form variant="outlined">
+            <Input id="variant-input-6" />
+          </Form>
+        </ConfigProvider>
+      </>,
+    );
+
+    expect(container.querySelector('#variant-input-1')).toHaveClass('ant-input-filled');
+    expect(container.querySelector('#variant-input-2')).toHaveClass('ant-input-outlined');
+    expect(container.querySelector('#variant-input-3')).toHaveClass('ant-input-borderless');
+    expect(container.querySelector('#variant-input-4')).toHaveClass('ant-input-filled');
+    expect(container.querySelector('#variant-input-5')).toHaveClass('ant-input-filled');
+    expect(container.querySelector('#variant-input-6')).toHaveClass('ant-input-outlined');
+  });
 });

components/config-provider/__tests__/style.test.tsx

@@ -57,6 +57,8 @@ import Transfer from '../../transfer';
 import Tree from '../../tree';
 import Typography from '../../typography';
 import Upload from '../../upload';
+import InputNumber from '../../input-number';
+import TreeSelect from '../../tree-select';
 
 describe('ConfigProvider support style and className props', () => {
   it('Should Space classNames works', () => {
@@ -1575,4 +1577,43 @@ describe('ConfigProvider support style and className props', () => {
     const element = container.querySelector<HTMLSpanElement>('.test-cp-icon');
     expect(element).toBeTruthy();
   });
+
+  it('should variant config work', () => {
+    const { container } = render(
+      <ConfigProvider
+        input={{ variant: 'filled' }}
+        inputNumber={{ variant: 'filled' }}
+        textArea={{ variant: 'filled' }}
+        mentions={{ variant: 'borderless' }}
+        select={{ variant: 'filled' }}
+        cascader={{ variant: 'outlined' }}
+        treeSelect={{ variant: 'borderless' }}
+        datePicker={{ variant: 'filled' }}
+        rangePicker={{ variant: 'filled' }}
+        timePicker={{ variant: 'borderless' }}
+      >
+        <Input className="input-variant" />
+        <InputNumber className="input-number-variant" />
+        <Input.TextArea className="textarea-variant" />
+        <Mentions className="mentions-variant" />
+        <Select className="select-variant" />
+        <Cascader className="cascader-variant" />
+        <TreeSelect className="tree-select-variant" />
+        <DatePicker className="date-picker-variant" />
+        <DatePicker.RangePicker className="range-picker-variant" />
+        <TimePicker className="time-picker-variant" />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.input-variant')).toHaveClass('ant-input-filled');
+    expect(container.querySelector('.input-number-variant')).toHaveClass('ant-input-number-filled');
+    expect(container.querySelector('.textarea-variant')).toHaveClass('ant-input-filled');
+    expect(container.querySelector('.mentions-variant')).toHaveClass('ant-mentions-borderless');
+    expect(container.querySelector('.select-variant')).toHaveClass('ant-select-filled');
+    expect(container.querySelector('.cascader-variant')).toHaveClass('ant-select-outlined');
+    expect(container.querySelector('.tree-select-variant')).toHaveClass('ant-select-borderless');
+    expect(container.querySelector('.date-picker-variant')).toHaveClass('ant-picker-filled');
+    expect(container.querySelector('.range-picker-variant')).toHaveClass('ant-picker-filled');
+    expect(container.querySelector('.time-picker-variant')).toHaveClass('ant-picker-borderless');
+  });
 });

components/config-provider/context.ts

@@ -26,6 +26,12 @@ import type { TagProps } from '../tag';
 import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
 import type { TourProps } from '../tour/interface';
 import type { TransferProps } from '../transfer';
+import type { InputNumberProps } from '../input-number';
+import type { TreeSelectProps } from '../tree-select';
+import type { DatePickerProps, RangePickerProps } from '../date-picker';
+import type { TimePickerProps } from '../time-picker';
+import type { CascaderProps } from '../cascader';
+import type { MentionsProps } from '../mentions';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 
 export const defaultIconPrefixCls = 'anticon';
@@ -136,10 +142,10 @@ export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closable' | '
 export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
 
 export type InputConfig = ComponentStyleConfig &
-  Pick<InputProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear'>;
+  Pick<InputProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear' | 'variant'>;
 
 export type TextAreaConfig = ComponentStyleConfig &
-  Pick<TextAreaProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear'>;
+  Pick<TextAreaProps, 'autoComplete' | 'classNames' | 'styles' | 'allowClear' | 'variant'>;
 
 export type ButtonConfig = ComponentStyleConfig &
   Pick<ButtonProps, 'classNames' | 'styles' | 'autoInsertSpace'>;
@@ -158,22 +164,39 @@ export type FlexConfig = ComponentStyleConfig & Pick<FlexProps, 'vertical'>;
 export type TransferConfig = ComponentStyleConfig & Pick<TransferProps, 'selectionsIcon'>;
 
 export type FormConfig = ComponentStyleConfig &
-  Pick<FormProps, 'requiredMark' | 'colon' | 'scrollToFirstError' | 'validateMessages'>;
+  Pick<FormProps, 'requiredMark' | 'colon' | 'scrollToFirstError' | 'validateMessages' | 'variant'>;
 
 export type FloatButtonGroupConfig = Pick<FloatButtonGroupProps, 'closeIcon'>;
 
 export type PaginationConfig = ComponentStyleConfig & Pick<PaginationProps, 'showSizeChanger'>;
 
-export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch'>;
+export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch' | 'variant'>;
 
 export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
 
+export type InputNumberConfig = ComponentStyleConfig & Pick<InputNumberProps, 'variant'>;
+
+export type CascaderConfig = ComponentStyleConfig & Pick<CascaderProps, 'variant'>;
+
+export type TreeSelectConfig = ComponentStyleConfig & Pick<TreeSelectProps, 'variant'>;
+
+export type DatePickerConfig = ComponentStyleConfig & Pick<DatePickerProps, 'variant'>;
+
+export type RangePickerConfig = ComponentStyleConfig & Pick<RangePickerProps, 'variant'>;
+
+export type TimePickerConfig = ComponentStyleConfig & Pick<TimePickerProps, 'variant'>;
+
+export type MentionsConfig = ComponentStyleConfig & Pick<MentionsProps, 'variant'>;
+
 export type PopupOverflow = 'viewport' | 'scroll';
 
 export interface ListConfig extends ComponentStyleConfig {
   item?: Pick<ListItemProps, 'classNames' | 'styles'>;
 }
 
+export const Variants = ['outlined', 'borderless', 'filled'] as const;
+export type Variant = (typeof Variants)[number];
+
 export interface WaveConfig {
   /**
    * @descCN 是否开启水波纹效果。如果需要关闭，可以设置为 `false`。
@@ -202,8 +225,10 @@ export interface ConfigConsumerProps {
   csp?: CSPConfig;
   /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
   autoInsertSpaceInButton?: boolean;
+  variant?: Variant;
   input?: InputConfig;
   textArea?: TextAreaConfig;
+  inputNumber?: InputNumberConfig;
   pagination?: PaginationConfig;
   locale?: Locale;
   direction?: DirectionType;
@@ -221,7 +246,8 @@ export interface ConfigConsumerProps {
   drawer?: DrawerConfig;
   calendar?: ComponentStyleConfig;
   carousel?: ComponentStyleConfig;
-  cascader?: ComponentStyleConfig;
+  cascader?: CascaderConfig;
+  treeSelect?: TreeSelectConfig;
   collapse?: CollapseConfig;
   floatButtonGroup?: FloatButtonGroupConfig;
   typography?: ComponentStyleConfig;
@@ -233,7 +259,7 @@ export interface ConfigConsumerProps {
   image?: ImageConfig;
   layout?: ComponentStyleConfig;
   list?: ListConfig;
-  mentions?: ComponentStyleConfig;
+  mentions?: MentionsConfig;
   modal?: ModalConfig;
   progress?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
@@ -255,14 +281,14 @@ export interface ConfigConsumerProps {
   card?: CardConfig;
   tabs?: TabsConfig;
   timeline?: ComponentStyleConfig;
-  timePicker?: ComponentStyleConfig;
+  timePicker?: TimePickerConfig;
   tour?: TourConfig;
   upload?: ComponentStyleConfig;
   notification?: NotificationConfig;
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
-  datePicker?: ComponentStyleConfig;
+  datePicker?: DatePickerConfig;
-  rangePicker?: ComponentStyleConfig;
+  rangePicker?: RangePickerConfig;
   dropdown?: ComponentStyleConfig;
   flex?: FlexConfig;
   wave?: WaveConfig;

components/config-provider/index.en-US.md

@@ -65,6 +65,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | prefixCls | Set prefix className | string | `ant` |  |
 | renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - |  |
 | theme | Set theme, ref [Customize Theme](/docs/react/customize-theme) | [Theme](/docs/react/customize-theme#theme) | - | 5.0.0 |
+| variant | Set variant of data entry components | `outlined` \| `filled` \| `borderless` | - | 5.19.0 |
 | virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |
 | warning | Config warning level, when `strict` is `false`, it will aggregate deprecated information into a single message | { strict: boolean } | - | 5.10.0 |
 

components/config-provider/index.tsx

@@ -47,8 +47,16 @@ import type {
   TourConfig,
   TransferConfig,
   WaveConfig,
+  Variant,
+  InputNumberConfig,
+  RangePickerConfig,
+  DatePickerConfig,
+  TimePickerConfig,
+  CascaderConfig,
+  TreeSelectConfig,
+  MentionsConfig,
 } from './context';
-import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
+import { ConfigConsumer, ConfigContext, defaultIconPrefixCls, Variants } from './context';
 import { registerTheme } from './cssVariables';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import { DisabledContextProvider } from './DisabledContext';
@@ -60,6 +68,10 @@ import type { SizeType } from './SizeContext';
 import SizeContext, { SizeContextProvider } from './SizeContext';
 import useStyle from './style';
 
+export type { Variant };
+
+export { Variants };
+
 /**
  * Since too many feedback using static method like `Modal.confirm` not getting theme, we record the
  * theme register info here to help developer get warning info.
@@ -125,8 +137,10 @@ export interface ConfigProviderProps {
   csp?: CSPConfig;
   /** @deprecated Please use `{ button: { autoInsertSpace: boolean }}` instead */
   autoInsertSpaceInButton?: boolean;
+  variant?: Variant;
   form?: FormConfig;
   input?: InputConfig;
+  inputNumber?: InputNumberConfig;
   textArea?: TextAreaConfig;
   select?: SelectConfig;
   pagination?: PaginationConfig;
@@ -161,7 +175,8 @@ export interface ConfigProviderProps {
   button?: ButtonConfig;
   calendar?: ComponentStyleConfig;
   carousel?: ComponentStyleConfig;
-  cascader?: ComponentStyleConfig;
+  cascader?: CascaderConfig;
+  treeSelect?: TreeSelectConfig;
   collapse?: CollapseConfig;
   divider?: ComponentStyleConfig;
   drawer?: DrawerConfig;
@@ -174,7 +189,7 @@ export interface ConfigProviderProps {
   image?: ImageConfig;
   layout?: ComponentStyleConfig;
   list?: ListConfig;
-  mentions?: ComponentStyleConfig;
+  mentions?: MentionsConfig;
   modal?: ModalConfig;
   progress?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
@@ -197,13 +212,13 @@ export interface ConfigProviderProps {
   card?: CardConfig;
   tabs?: TabsConfig;
   timeline?: ComponentStyleConfig;
-  timePicker?: ComponentStyleConfig;
+  timePicker?: TimePickerConfig;
   upload?: ComponentStyleConfig;
   notification?: NotificationConfig;
   tree?: ComponentStyleConfig;
   colorPicker?: ComponentStyleConfig;
-  datePicker?: ComponentStyleConfig;
+  datePicker?: DatePickerConfig;
-  rangePicker?: ComponentStyleConfig;
+  rangePicker?: RangePickerConfig;
   dropdown?: ComponentStyleConfig;
   flex?: FlexConfig;
   /**
@@ -367,6 +382,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     warning: warningConfig,
     tour,
     floatButtonGroup,
+    variant,
+    inputNumber,
+    treeSelect,
   } = props;
 
   // =================================== Context ===================================
@@ -463,6 +481,9 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     warning: warningConfig,
     tour,
     floatButtonGroup,
+    variant,
+    inputNumber,
+    treeSelect,
   };
 
   if (process.env.NODE_ENV !== 'production') {

components/config-provider/index.zh-CN.md

@@ -66,6 +66,7 @@ export default Demo;
 | prefixCls | 设置统一样式前缀 | string | `ant` |  |
 | renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty-cn) | function(componentName: string): ReactNode | - |  |
 | theme | 设置主题，参考 [定制主题](/docs/react/customize-theme-cn) | [Theme](/docs/react/customize-theme-cn#theme) | - | 5.0.0 |
+| variant | 设置全局输入组件形态变体 | `outlined` \| `filled` \| `borderless` | - | 5.19.0 |
 | virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
 | warning | 设置警告等级，`strict` 为 `false` 时会将废弃相关信息聚合为单条信息 | { strict: boolean } | - | 5.10.0 |
 

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -58,7 +58,7 @@ export default function generateRangePicker<DateType extends AnyObject>(
     const { picker } = props;
     const rootPrefixCls = getPrefixCls();
 
-    const [variant, enableVariantCls] = useVariant(customVariant, bordered);
+    const [variant, enableVariantCls] = useVariant('rangePicker', customVariant, bordered);
 
     const rootCls = useCSSVarCls(prefixCls);
     const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -70,7 +70,7 @@ export default function generatePicker<DateType extends AnyObject>(
       const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
       const innerRef = React.useRef<PickerRef>(null);
 
-      const [variant, enableVariantCls] = useVariant(customVariant, bordered);
+      const [variant, enableVariantCls] = useVariant('datePicker', customVariant, bordered);
 
       const rootCls = useCSSVarCls(prefixCls);
       const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);

components/date-picker/generatePicker/interface.ts

@@ -8,7 +8,7 @@ import type { Locale as RcPickerLocale } from 'rc-picker/lib/interface';
 import type { InputStatus } from '../../_util/statusUtils';
 import type { AnyObject } from '../../_util/type';
 import type { SizeType } from '../../config-provider/SizeContext';
-import type { Variant } from '../../form/hooks/useVariants';
+import type { Variant } from '../../config-provider';
 import type { TimePickerLocale } from '../../time-picker';
 
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;

components/form/Form.tsx

@@ -19,7 +19,7 @@ import type { FeedbackIcons } from './FormItem';
 import useForm from './hooks/useForm';
 import type { FormInstance } from './hooks/useForm';
 import useFormWarning from './hooks/useFormWarning';
-import type { Variant } from './hooks/useVariants';
+import type { Variant } from '../config-provider';
 import type { FormLabelAlign } from './interface';
 import useStyle from './style';
 import ValidateMessagesContext from './validateMessagesContext';

components/form/context.tsx

@@ -9,7 +9,7 @@ import omit from 'rc-util/lib/omit';
 import type { ColProps } from '../grid/col';
 import type { FormInstance, RequiredMark } from './Form';
 import type { FeedbackIcons, ValidateStatus } from './FormItem';
-import type { Variant } from './hooks/useVariants';
+import type { Variant } from '../config-provider';
 import type { FormLabelAlign } from './interface';
 
 /** Form Context. Set top form style and pass to Form Item usage. */

components/form/hooks/useVariants.ts

@@ -1,18 +1,34 @@
 import { useContext } from 'react';
 
 import { VariantContext } from '../context';
+import type { Variant, ConfigProviderProps } from '../../config-provider';
+import { ConfigContext, Variants } from '../../config-provider';
 
-export const Variants = ['outlined', 'borderless', 'filled'] as const;
+type VariantComponents = keyof Pick<
-export type Variant = (typeof Variants)[number];
+  ConfigProviderProps,
+  | 'input'
+  | 'inputNumber'
+  | 'textArea'
+  | 'mentions'
+  | 'select'
+  | 'cascader'
+  | 'treeSelect'
+  | 'datePicker'
+  | 'timePicker'
+  | 'rangePicker'
+>;
 
 /**
  * Compatible for legacy `bordered` prop.
  */
 const useVariant = (
+  component: VariantComponents,
   variant: Variant | undefined,
   legacyBordered: boolean | undefined = undefined,
 ): [Variant, boolean] => {
+  const { variant: configVariant, [component]: componentConfig } = useContext(ConfigContext);
   const ctxVariant = useContext(VariantContext);
+  const configComponentVariant = componentConfig?.variant;
 
   let mergedVariant: Variant;
   if (typeof variant !== 'undefined') {
@@ -20,7 +36,8 @@ const useVariant = (
   } else if (legacyBordered === false) {
     mergedVariant = 'borderless';
   } else {
-    mergedVariant = ctxVariant ?? 'outlined';
+    // form variant > component global variant > global variant
+    mergedVariant = ctxVariant ?? configComponentVariant ?? configVariant ?? 'outlined';
   }
 
   const enableVariantCls = Variants.includes(mergedVariant);

components/input-number/index.tsx

@@ -15,7 +15,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../form/hooks/useVariants';
+import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import { useCompactItemContext } from '../space/Compact';
 import useStyle from './style';
@@ -109,7 +109,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const disabled = React.useContext(DisabledContext);
   const mergedDisabled = customDisabled ?? disabled;
 
-  const [variant, enableVariantCls] = useVariant(customVariant, bordered);
+  const [variant, enableVariantCls] = useVariant('inputNumber', customVariant, bordered);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   const suffixNode = hasFeedback && <>{feedbackIcon}</>;

components/input/Input.tsx

@@ -15,7 +15,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../form/hooks/useVariants';
+import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import { useCompactItemContext } from '../space/Compact';
 import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
@@ -174,7 +174,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
 
   const mergedAllowClear = getAllowClear(allowClear ?? input?.allowClear);
 
-  const [variant, enableVariantCls] = useVariant(customVariant, bordered);
+  const [variant, enableVariantCls] = useVariant('input', customVariant, bordered);
 
   return wrapCSSVar(
     <RcInput

components/input/OTP/index.tsx

@@ -12,7 +12,7 @@ import useSize from '../../config-provider/hooks/useSize';
 import type { SizeType } from '../../config-provider/SizeContext';
 import { FormItemInputContext } from '../../form/context';
 import type { FormItemStatusContextProps } from '../../form/context';
-import type { Variant } from '../../form/hooks/useVariants';
+import type { Variant } from '../../config-provider';
 import type { InputRef } from '../Input';
 import useStyle from '../style/otp';
 import OTPInput from './OTPInput';

components/input/TextArea.tsx

@@ -15,7 +15,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../form/hooks/useVariants';
+import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import type { InputFocusOptions } from './Input';
 import { triggerFocus } from './Input';
@@ -96,7 +96,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
   const rootCls = useCSSVarCls(prefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
-  const [variant, enableVariantCls] = useVariant(customVariant, bordered);
+  const [variant, enableVariantCls] = useVariant('textArea', customVariant, bordered);
 
   const mergedAllowClear = getAllowClear(allowClear ?? textArea?.allowClear);
 

components/mentions/index.tsx

@@ -18,7 +18,7 @@ import { ConfigContext } from '../config-provider';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../form/hooks/useVariants';
+import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import Spin from '../spin';
 import useStyle from './style';
@@ -161,7 +161,7 @@ const InternalMentions = React.forwardRef<MentionsRef, MentionProps>((props, ref
   const rootCls = useCSSVarCls(prefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
-  const [variant, enableVariantCls] = useVariant(customVariant);
+  const [variant, enableVariantCls] = useVariant('mentions', customVariant);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   const suffixNode = hasFeedback && <>{feedbackIcon}</>;

components/select/index.tsx

@@ -21,7 +21,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../form/hooks/useVariants';
+import type { Variant } from '../config-provider';
 import useVariants from '../form/hooks/useVariants';
 import { useCompactItemContext } from '../space/Compact';
 import { useToken } from '../theme/internal';
@@ -142,7 +142,7 @@ const InternalSelect = <
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 
-  const [variant, enableVariantCls] = useVariants(customizeVariant, bordered);
+  const [variant, enableVariantCls] = useVariants('select', customizeVariant, bordered);
 
   const rootCls = useCSSVarCls(prefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls);

components/time-picker/index.tsx

@@ -11,6 +11,7 @@ import type {
   PickerPropsWithMultiple,
   RangePickerProps,
 } from '../date-picker/generatePicker/interface';
+import useVariant from '../form/hooks/useVariants';
 
 export type PickerTimeProps<DateType extends AnyObject> = PickerPropsWithMultiple<
   DateType,
@@ -45,13 +46,15 @@ export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'>
 }
 
 const TimePicker = React.forwardRef<any, TimePickerProps>(
-  ({ addon, renderExtraFooter, ...restProps }, ref) => {
+  ({ addon, renderExtraFooter, variant, bordered, ...restProps }, ref) => {
     if (process.env.NODE_ENV !== 'production') {
       const warning = devUseWarning('TimePicker');
 
       warning.deprecated(!addon, 'addon', 'renderExtraFooter');
     }
 
+    const [mergedVariant] = useVariant('timePicker', variant, bordered);
+
     const internalRenderExtraFooter = React.useMemo(() => {
       if (renderExtraFooter) {
         return renderExtraFooter;
@@ -69,6 +72,7 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
         mode={undefined}
         ref={ref}
         renderExtraFooter={internalRenderExtraFooter}
+        variant={mergedVariant}
       />
     );
   },

components/tree-select/index.tsx

@@ -21,7 +21,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../form/hooks/useVariants';
+import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import mergedBuiltinPlacements from '../select/mergedBuiltinPlacements';
 import useSelectStyle from '../select/style';
@@ -170,7 +170,7 @@ const InternalTreeSelect = <
   const [wrapCSSVar, hashId, cssVarCls] = useSelectStyle(prefixCls, rootCls);
   const [treeSelectWrapCSSVar] = useStyle(treeSelectPrefixCls, treePrefixCls, treeSelectRootCls);
 
-  const [variant, enableVariantCls] = useVariant(customVariant, bordered);
+  const [variant, enableVariantCls] = useVariant('treeSelect', customVariant, bordered);
 
   const mergedDropdownClassName = classNames(
     popupClassName || dropdownClassName,