feat: support classnames and styles

Author: thinkasany

src/BaseSelect/index.tsx

@@ -30,6 +30,7 @@ import { getSeparatedContent, isValidCount } from '../utils/valueUtil';
 import SelectContext from '../SelectContext';
 import type { SelectContextProps } from '../SelectContext';
 import Polite from './Polite';
+import { SemanticName } from '../Select';
 
 export type {
   DisplayInfoType,
@@ -131,6 +132,8 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele
 export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
   className?: string;
   style?: React.CSSProperties;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   title?: string;
   showSearch?: boolean;
   tagRender?: (props: CustomTagProps) => React.ReactElement;
@@ -291,6 +294,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     onKeyDown,
     onMouseDown,
 
+    classNames: selectClassNames,
+    styles,
+
     // Rest Props
     ...restProps
   } = props;
@@ -720,9 +726,10 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   if (showSuffixIcon) {
     arrowNode = (
       <TransBtn
-        className={classNames(`${prefixCls}-arrow`, {
+        className={classNames(`${prefixCls}-arrow`, selectClassNames?.suffix, {
           [`${prefixCls}-arrow-loading`]: loading,
         })}
+        style={styles?.suffix}
         customizeIcon={suffixIcon}
         customizeIconProps={{
           loading,
@@ -812,6 +819,8 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       ) : (
         <Selector
           {...props}
+          prefixClassName={selectClassNames?.prefix}
+          prefixStyle={styles?.prefix}
           domRef={selectorDomRef}
           prefixCls={prefixCls}
           inputElement={customizeInputElement}

src/Select.tsx

@@ -107,6 +107,7 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default
 
 type ArrayElementType<T> = T extends (infer E)[] ? E : T;
 
+export type SemanticName = 'prefix' | 'suffix';
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType>
   extends BaseSelectPropsWithoutPrivate {
   prefixCls?: string;
@@ -157,6 +158,8 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   defaultValue?: ValueType | null;
   maxCount?: number;
   onChange?: (value: ValueType, option?: OptionType | OptionType[]) => void;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 }
 
 function isRawValue(value: DraftValueType): value is RawValueType {

src/Selector/index.tsx

@@ -17,6 +17,7 @@ import useLock from '../hooks/useLock';
 import { isValidateOpenKey } from '../utils/keyUtil';
 import MultipleSelector from './MultipleSelector';
 import SingleSelector from './SingleSelector';
+import classNames from 'classnames';
 
 export interface InnerSelectorProps {
   prefixCls: string;
@@ -54,6 +55,8 @@ export interface RefSelectorProps {
 }
 
 export interface SelectorProps {
+  prefixClassName: string;
+  prefixStyle: React.CSSProperties;
   id: string;
   prefixCls: string;
   showSearch?: boolean;
@@ -107,6 +110,8 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
   const compositionStatusRef = useRef<boolean>(false);
 
   const {
+    prefixClassName,
+    prefixStyle,
     prefixCls,
     open,
     mode,
@@ -290,7 +295,11 @@ const Selector: React.ForwardRefRenderFunction<RefSelectorProps, SelectorProps>
       onClick={onClick}
       onMouseDown={onMouseDown}
     >
-      {prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
+      {prefix && (
+        <div className={classNames(`${prefixCls}-prefix`, prefixClassName)} style={prefixStyle}>
+          {prefix}
+        </div>
+      )}
       {selectNode}
     </div>
   );

src/TransBtn.tsx

@@ -4,6 +4,7 @@ import type { RenderNode } from './BaseSelect';
 
 export interface TransBtnProps {
   className: string;
+  style?: React.CSSProperties;
   customizeIcon: RenderNode;
   customizeIconProps?: any;
   onMouseDown?: React.MouseEventHandler<HTMLSpanElement>;
@@ -12,7 +13,8 @@ export interface TransBtnProps {
 }
 
 const TransBtn: React.FC<TransBtnProps> = (props) => {
-  const { className, customizeIcon, customizeIconProps, children, onMouseDown, onClick } = props;
+  const { className, style, customizeIcon, customizeIconProps, children, onMouseDown, onClick } =
+    props;
 
   const icon =
     typeof customizeIcon === 'function' ? customizeIcon(customizeIconProps) : customizeIcon;
@@ -24,7 +26,7 @@ const TransBtn: React.FC<TransBtnProps> = (props) => {
         event.preventDefault();
         onMouseDown?.(event);
       }}
-      style={{ userSelect: 'none', WebkitUserSelect: 'none' }}
+      style={{ userSelect: 'none', WebkitUserSelect: 'none', ...style }}
       unselectable="on"
       onClick={onClick}
       aria-hidden

tests/Select.test.tsx

@@ -2417,4 +2417,35 @@ describe('Select.Basic', () => {
     expect(onBlur).toHaveBeenCalledTimes(2);
     expect(inputElem.value).toEqual('bb');
   });
+  it('support classnames and styles', () => {
+    const customClassNames = {
+      prefix: 'cutsom-prefix',
+      suffix: 'custom-suffix',
+    };
+    const customStyle = {
+      prefix: { color: 'red' },
+      suffix: { color: 'green' },
+    };
+    const { container } = render(
+      <Select
+        open
+        classNames={customClassNames}
+        styles={customStyle}
+        suffixIcon={<div>arrow</div>}
+        prefix="Foobar"
+        value={['bamboo']}
+        mode="multiple"
+        options={[
+          { value: 'jack', label: 'Jack' },
+          { value: 'lucy', label: 'Lucy' },
+        ]}
+      />,
+    );
+    const prefix = container.querySelector('.rc-select-prefix');
+    const suffix = container.querySelector('.rc-select-arrow');
+    expect(prefix).toHaveClass('cutsom-prefix');
+    expect(prefix).toHaveStyle('color: red');
+    expect(suffix).toHaveClass('custom-suffix');
+    expect(suffix).toHaveStyle('color: green');
+  });
 });