diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 363dbdd272..c1d17008ee 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -5,6 +5,7 @@ import Divider from '../../divider'; import Image from '../../image'; import Result from '../../result'; import Segmented from '../../segmented'; +import Slider from '../../slider'; import Space from '../../space'; import Spin from '../../spin'; import Steps from '../../steps'; @@ -191,4 +192,15 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveClass('cp-result'); expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + + it('Should Slider className & style works', () => { + const { container } = render( + + + , + ); + const element = container.querySelector('.ant-slider'); + expect(element).toHaveClass('cp-slider'); + expect(element).toHaveStyle({ backgroundColor: 'red' }); + }); }); diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 04302def34..70de0ec1cb 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -113,6 +113,10 @@ export interface ConfigConsumerProps { className?: string; style?: React.CSSProperties; }; + slider?: { + className?: string; + style?: React.CSSProperties; + }; } const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 864aea500d..aa7db90fe0 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -109,6 +109,7 @@ const { | 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 } | - | | +| 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 | | steps | Set Steps 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 7b7a6fdc3e..f52c2c0ad1 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -162,6 +162,10 @@ export interface ConfigProviderProps { className?: string; style?: React.CSSProperties; }; + slider?: { + className?: string; + style?: React.CSSProperties; + }; } interface ProviderChildrenProps extends ConfigProviderProps { @@ -256,6 +260,7 @@ const ProviderChildren: React.FC = (props) => { steps, image, result, + slider, } = props; // =================================== Warning =================================== @@ -314,6 +319,7 @@ const ProviderChildren: React.FC = (props) => { steps, image, result, + slider, }; const config = { diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 6fc3deffbc..50635a1fdd 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -111,6 +111,7 @@ const { | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - | | +| 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 | | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 1c817e5998..e47218e5fe 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -104,6 +104,7 @@ const Slider = React.forwardRef range, className, rootClassName, + style, disabled, // Deprecated Props tooltipPrefixCls: legacyTooltipPrefixCls, @@ -111,11 +112,10 @@ const Slider = React.forwardRef tooltipVisible: legacyTooltipVisible, getTooltipPopupContainer: legacyGetTooltipPopupContainer, tooltipPlacement: legacyTooltipPlacement, - ...restProps } = props; - const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext); + const { direction, slider, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext); const contextDisabled = React.useContext(DisabledContext); const mergedDisabled = disabled ?? contextDisabled; const [opens, setOpens] = React.useState({}); @@ -140,6 +140,7 @@ const Slider = React.forwardRef const cls = classNames( className, + slider?.className, rootClassName, { [`${prefixCls}-rtl`]: direction === 'rtl', @@ -235,6 +236,8 @@ const Slider = React.forwardRef ); }; + const mergedStyle: React.CSSProperties = { ...slider?.style, ...style }; + return wrapSSR( range={mergedRange} draggableTrack={draggableTrack} className={cls} + style={mergedStyle} disabled={mergedDisabled} ref={ref} prefixCls={prefixCls}