feat: ConfigProvider support Collapse className and style properties (#43390)

components/collapse/Collapse.tsx

@@ -57,12 +57,13 @@ interface PanelProps {
 }
 
 const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, collapse } = React.useContext(ConfigContext);
 
   const {
     prefixCls: customizePrefixCls,
     className,
     rootClassName,
+    style,
     bordered = true,
     ghost,
     size: customizeSize,
@@ -113,6 +114,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
       [`${prefixCls}-ghost`]: !!ghost,
       [`${prefixCls}-${mergedSize}`]: mergedSize !== 'middle',
     },
+    collapse?.className,
     className,
     rootClassName,
     hashId,
@@ -151,6 +153,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
       expandIcon={renderExpandIcon}
       prefixCls={prefixCls}
       className={collapseClassName}
+      style={{ ...collapse?.style, ...style }}
     >
       {items}
     </RcCollapse>,

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

@@ -10,6 +10,7 @@ import Calendar from '../../calendar';
 import Card from '../../card';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
+import Collapse from '../../collapse';
 import ColorPicker from '../../color-picker';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
@@ -196,6 +197,48 @@ describe('ConfigProvider support style and className props', () => {
     expect(element).toHaveStyle({ backgroundColor: 'red' });
   });
 
+  it('Should Collapse className works', () => {
+    const items = [
+      {
+        key: '1',
+        label: 'test label',
+        children: <p>item</p>,
+      },
+    ];
+    const { container } = render(
+      <ConfigProvider
+        collapse={{
+          className: 'test-class',
+        }}
+      >
+        <Collapse items={items} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-collapse')).toHaveClass('test-class');
+  });
+
+  it('Should Collapse style works', () => {
+    const items = [
+      {
+        key: '1',
+        label: 'test label',
+        children: <p>item</p>,
+      },
+    ];
+    const { container } = render(
+      <ConfigProvider
+        collapse={{
+          style: { color: 'red' },
+        }}
+      >
+        <Collapse items={items} style={{ fontSize: '16px' }} />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-collapse')).toHaveStyle('color: red; font-size: 16px;');
+  });
+
   it('Should Typography className & style works', () => {
     const { container } = render(
       <ConfigProvider

components/config-provider/context.ts

@@ -100,6 +100,7 @@ export interface ConfigConsumerProps {
   divider?: ComponentStyleConfig;
   calendar?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
+  collapse?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;
   spin?: ComponentStyleConfig;

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

@@ -111,6 +111,7 @@ const {
 | calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.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 |
+| collapse | Set Collapse common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | Set ColorPicker 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

@@ -143,6 +143,7 @@ export interface ConfigProviderProps {
   button?: ButtonConfig;
   calendar?: ComponentStyleConfig;
   cascader?: ComponentStyleConfig;
+  collapse?: ComponentStyleConfig;
   divider?: ComponentStyleConfig;
   typography?: ComponentStyleConfig;
   skeleton?: ComponentStyleConfig;
@@ -272,6 +273,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     spin,
     calendar,
     cascader,
+    collapse,
     typography,
     checkbox,
     descriptions,
@@ -363,6 +365,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     spin,
     calendar,
     cascader,
+    collapse,
     typography,
     checkbox,
     descriptions,

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

@@ -113,6 +113,7 @@ const {
 | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | colorPicker | 设置 ColorPicker 组件的通用属性 | { 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 |