From 5f092d8cd5c37c7f56108b7ec70e46b70ff8058f Mon Sep 17 00:00:00 2001
From: muxin <434980373@qq.com>
Date: Tue, 27 Jun 2023 17:12:36 +0800
Subject: [PATCH] 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 3a39d872518616ef41063447a4a8049ce7311a15.
---
 .../config-provider/__tests__/style.test.tsx    | 17 +++++++++++++++++
 components/config-provider/context.ts           |  2 +-
 components/config-provider/index.en-US.md       |  2 +-
 components/config-provider/index.tsx            |  2 +-
 components/config-provider/index.zh-CN.md       |  2 +-
 components/select/index.tsx                     |  3 +++
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 7f0531770d..f3ce03a205 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/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
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index 16923724b3..52b83d2faf 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -82,7 +82,7 @@ export interface ConfigConsumerProps {
     scrollToFirstError?: Options | boolean;
   };
   theme?: ThemeConfig;
-  select?: {
+  select?: ComponentStyleConfig & {
     showSearch?: boolean;
   };
   anchor?: ComponentStyleConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index b8b290d10c..9a48e3be54 100644
--- a/components/config-provider/index.en-US.md
+++ b/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 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 3920187d7f..aaed87d856 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -110,7 +110,7 @@ export interface ConfigProviderProps {
   input?: {
     autoComplete?: string;
   };
-  select?: {
+  select?: ComponentStyleConfig & {
     showSearch?: boolean;
   };
   pagination?: ComponentStyleConfig & { showSizeChanger?: boolean };
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 6861cf492f..0a9fad3568 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/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 |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 9eed691872..bb4f163685 100755
--- a/components/select/index.tsx
+++ b/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(