feat: config-provider support Select className and style properties (#43217)

* feat: config-provider support Select className and style properties

* feat: config-provider support Modal className and style properties

* Revert "feat: config-provider support Modal className and style properties"

This reverts commit 3a39d87251.

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

@@ -13,6 +13,7 @@ import Pagination from '../../pagination';
 import Radio from '../../radio';
 import Result from '../../result';
 import Segmented from '../../segmented';
+import Select from '../../select';
 import Slider from '../../slider';
 import Space from '../../space';
 import Spin from '../../spin';
@@ -162,6 +163,22 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Select className & style works', () => {
+    const { container } = render(
+      <ConfigProvider select={{ className: 'cp-select', style: { backgroundColor: 'red' } }}>
+        <Select
+          options={[
+            { value: 'jack', label: 'Jack' },
+            { value: 'lucy', label: 'Lucy' },
+          ]}
+        />
+      </ConfigProvider>,
+    );
+    const element = container.querySelector<HTMLDivElement>('.ant-select');
+    expect(element).toHaveClass('cp-select');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
+
   it('Should Steps className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -82,7 +82,7 @@ export interface ConfigConsumerProps {
     scrollToFirstError?: Options | boolean;
   };
   theme?: ThemeConfig;
-  select?: {
+  select?: ComponentStyleConfig & {
     showSearch?: boolean;
   };
   anchor?: ComponentStyleConfig;

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

@@ -116,7 +116,7 @@ const {
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | Set Segmented common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| select | Set Select common props | { showSearch?: boolean } | - |  |
+| select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - |  |
 | slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | Set Spin common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -110,7 +110,7 @@ export interface ConfigProviderProps {
   input?: {
     autoComplete?: string;
   };
-  select?: {
+  select?: ComponentStyleConfig & {
     showSearch?: boolean;
   };
   pagination?: ComponentStyleConfig & { showSizeChanger?: boolean };

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

@@ -118,7 +118,7 @@ const {
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - |  |
+| select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - |  |
 | slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
 | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/select/index.tsx

@@ -92,6 +92,7 @@ const InternalSelect = <
     dropdownMatchSelectWidth,
     popupMatchSelectWidth,
     direction: propDirection,
+    style,
     ...props
   }: SelectProps<ValueType, OptionType>,
   ref: React.Ref<BaseSelectRef>,
@@ -191,6 +192,7 @@ const InternalSelect = <
     },
     getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
     compactItemClassnames,
+    select?.className,
     className,
     rootClassName,
     hashId,
@@ -228,6 +230,7 @@ const InternalSelect = <
       virtual={virtual}
       showSearch={select?.showSearch}
       {...selectProps}
+      style={{ ...select?.style, ...style }}
       dropdownMatchSelectWidth={mergedPopupMatchSelectWidth}
       builtinPlacements={mergedBuiltinPlacements}
       transitionName={getTransitionName(