diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 06d9ff6ea8..6277127094 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -57,12 +57,13 @@ interface PanelProps { } const Collapse = React.forwardRef((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((props, ref) => [`${prefixCls}-ghost`]: !!ghost, [`${prefixCls}-${mergedSize}`]: mergedSize !== 'middle', }, + collapse?.className, className, rootClassName, hashId, @@ -151,6 +153,7 @@ const Collapse = React.forwardRef((props, ref) => expandIcon={renderExpandIcon} prefixCls={prefixCls} className={collapseClassName} + style={{ ...collapse?.style, ...style }} > {items} , diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index a3a1133ce3..54e50027bf 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/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:

item

, + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-collapse')).toHaveClass('test-class'); + }); + + it('Should Collapse style works', () => { + const items = [ + { + key: '1', + label: 'test label', + children:

item

, + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-collapse')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Typography className & style works', () => { const { container } = render( = (props) => { spin, calendar, cascader, + collapse, typography, checkbox, descriptions, @@ -363,6 +365,7 @@ const ProviderChildren: React.FC = (props) => { spin, calendar, cascader, + collapse, typography, checkbox, descriptions, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index d554aca459..941a80671d 100644 --- a/components/config-provider/index.zh-CN.md +++ b/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 |