feat: support semantic for baseSelect

src/BaseSelect/index.tsx

@@ -283,6 +283,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     placement,
     builtinPlacements,
     getPopupContainer,
+    styles: baseSelectStyles,
+    classNames: baseSelectClassNames,
 
     // Focus
     showAction = [],
@@ -412,9 +414,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     maxCount,
     rawValues,
     classNames: selectClassNames,
-    styles,
+    styles: selectStyles,
   } = React.useContext<SelectContextProps>(SelectContext) || {};
 
+  const contextClassNames = baseSelectClassNames ?? selectClassNames;
+  const contextStyles = baseSelectStyles ?? selectStyles;
+
   const onInternalSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
     if (multiple && isValidCount(maxCount) && rawValues?.size >= maxCount) {
       return;
@@ -703,6 +708,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       multiple,
       toggleOpen: onToggleOpen,
       showScrollBar,
+      styles: contextStyles,
+      classNames: contextClassNames,
     }),
     [
       props,
@@ -728,10 +735,10 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   if (showSuffixIcon) {
     arrowNode = (
       <TransBtn
-        className={classNames(`${prefixCls}-arrow`, selectClassNames?.suffix, {
+        className={classNames(`${prefixCls}-arrow`, contextClassNames?.suffix, {
           [`${prefixCls}-arrow-loading`]: loading,
         })}
-        style={styles?.suffix}
+        style={contextStyles?.suffix}
         customizeIcon={suffixIcon}
         customizeIconProps={{
           loading,
@@ -821,8 +828,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       ) : (
         <Selector
           {...props}
-          prefixClassName={selectClassNames?.prefix}
-          prefixStyle={styles?.prefix}
+          prefixClassName={contextClassNames?.prefix}
+          prefixStyle={contextStyles?.prefix}
           domRef={selectorDomRef}
           prefixCls={prefixCls}
           inputElement={customizeInputElement}

src/Selector/Input.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { composeRef } from '@rc-component/util/lib/ref';
 import { warning } from '@rc-component/util/lib/warning';
-import SelectContext from '../SelectContext';
+import useBaseProps from '../hooks/useBaseProps';
 type InputRef = HTMLInputElement | HTMLTextAreaElement;
 
 interface InputProps {
@@ -57,8 +57,8 @@ const Input: React.ForwardRefRenderFunction<InputRef, InputProps> = (props, ref)
     open,
     attrs,
   } = props;
-  const { classNames: contextClassNames, styles: contextStyles } =
-    React.useContext(SelectContext) || {};
+
+  const { classNames: contextClassNames, styles: contextStyles } = useBaseProps() || {};
 
   let inputNode: React.ComponentElement<any, any> = inputElement || <input />;
 

tests/Select.test.tsx

@@ -13,6 +13,7 @@ import type { ScrollConfig } from 'rc-virtual-list/lib/List';
 import React from 'react';
 import type { SelectProps } from '../src';
 import Select, { OptGroup, Option, useBaseProps } from '../src';
+import BaseSelect from '../src/BaseSelect';
 import type { BaseSelectRef } from '../src/BaseSelect';
 import allowClearTest from './shared/allowClearTest';
 import blurTest from './shared/blurTest';
@@ -2464,4 +2465,46 @@ describe('Select.Basic', () => {
     expect(input).toHaveClass(customClassNames.input);
     expect(input).toHaveStyle(customStyle.input);
   });
+  it('support classnames and styles for baseSelect', () => {
+    const customClassNames = {
+      prefix: 'cutsom-prefix',
+      suffix: 'custom-suffix',
+      list: 'custom-list',
+      listItem: 'custom-item',
+      input: 'custom-input',
+    };
+    const customStyle = {
+      prefix: { color: 'red' },
+      suffix: { color: 'green' },
+      list: { color: 'yellow' },
+      listItem: { color: 'blue' },
+      input: { color: 'black' },
+    };
+    const { container } = render(
+      <BaseSelect
+        displayValues={[]}
+        prefixCls="rc-select"
+        id="base-select"
+        open
+        classNames={customClassNames}
+        styles={customStyle}
+        suffixIcon={<div>arrow</div>}
+        prefix="Foobar"
+        onDisplayValuesChange={() => {}}
+        searchValue=""
+        onSearch={() => {}}
+        OptionList={() => <div>Option List</div>}
+        emptyOptions={false}
+      />,
+    );
+    const prefix = container.querySelector('.rc-select-prefix');
+    const suffix = container.querySelector('.rc-select-arrow');
+    const input = container.querySelector('.rc-select-selection-search-input');
+    expect(prefix).toHaveClass(customClassNames.prefix);
+    expect(prefix).toHaveStyle(customStyle.prefix);
+    expect(suffix).toHaveClass(customClassNames.suffix);
+    expect(suffix).toHaveStyle(customStyle.suffix);
+    expect(input).toHaveClass(customClassNames.input);
+    expect(input).toHaveStyle(customStyle.input);
+  });
 });