feat: config-provider support Cascader className and style properties (#43205)

components/cascader/index.tsx

@@ -149,6 +149,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     status: customStatus,
     showArrow,
     builtinPlacements,
+    style,
     ...rest
   } = props;
 
@@ -160,6 +161,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     renderEmpty,
     direction: rootDirection,
     popupOverflow,
+    cascader,
   } = React.useContext(ConfigContext);
 
   const mergedDirection = direction || rootDirection;
@@ -289,11 +291,13 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
         },
         getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
         compactItemClassnames,
+        cascader?.className,
         className,
         rootClassName,
         hashId,
       )}
       disabled={mergedDisabled}
+      style={{ ...cascader?.style, ...style }}
       {...(restProps as any)}
       builtinPlacements={mergedBuiltinPlacements}
       direction={mergedDirection}

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

@@ -3,6 +3,7 @@ import ConfigProvider from '..';
 import { render } from '../../../tests/utils';
 import Anchor from '../../anchor';
 import Breadcrumb from '../../breadcrumb';
+import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
@@ -124,6 +125,53 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' });
   });
 
+  it('Should Cascader className & style works', () => {
+    const options = [
+      {
+        value: 'zhejiang',
+        label: 'Zhejiang',
+        children: [
+          {
+            value: 'hangzhou',
+            label: 'Hangzhou',
+            children: [
+              {
+                value: 'xihu',
+                label: 'West Lake',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        value: 'jiangsu',
+        label: 'Jiangsu',
+        children: [
+          {
+            value: 'nanjing',
+            label: 'Nanjing',
+            children: [
+              {
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const { container } = render(
+      <ConfigProvider cascader={{ className: 'cp-cascader', style: { backgroundColor: 'red' } }}>
+        <Cascader open options={options} />
+      </ConfigProvider>,
+    );
+
+    const element = container.querySelector<HTMLElement>('.ant-cascader');
+    expect(element).toHaveClass('cp-cascader');
+    expect(element).toHaveStyle({ backgroundColor: 'red' });
+  });
+
   it('Should Typography className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -88,6 +88,7 @@ export interface ConfigConsumerProps {
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
   divider?: ComponentStyleConfig;
+  cascader?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;
   segmented?: ComponentStyleConfig;

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

@@ -104,6 +104,7 @@ const {
 | anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -136,6 +136,7 @@ export interface ConfigProviderProps {
   theme?: ThemeConfig;
   anchor?: ComponentStyleConfig;
   button?: ButtonConfig;
+  cascader?: ComponentStyleConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;
@@ -240,6 +241,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     componentDisabled,
     segmented,
     spin,
+    cascader,
     typography,
     checkbox,
     descriptions,
@@ -307,6 +309,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     theme: mergedTheme,
     segmented,
     spin,
+    cascader,
     typography,
     checkbox,
     descriptions,

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

@@ -106,6 +106,7 @@ const {
 | anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 |
+| cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |