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}