diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 5368654b34..363dbdd272 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -3,6 +3,7 @@ import ConfigProvider from '..';
import { render } from '../../../tests/utils';
import Divider from '../../divider';
import Image from '../../image';
+import Result from '../../result';
import Segmented from '../../segmented';
import Space from '../../space';
import Spin from '../../spin';
@@ -179,4 +180,15 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveClass('config-provider-image');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
+
+ it('Should Result className & style works', () => {
+ const { container } = render(
+
+
+ ,
+ );
+ const element = container.querySelector('.ant-result');
+ expect(element).toHaveClass('cp-result');
+ expect(element).toHaveStyle({ backgroundColor: 'red' });
+ });
});
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index e8f891a1a4..04302def34 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -109,6 +109,10 @@ export interface ConfigConsumerProps {
className?: string;
style?: React.CSSProperties;
};
+ result?: {
+ 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 7e442c9f2f..864aea500d 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -106,6 +106,7 @@ const {
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
| image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
+| 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 } | - | |
| 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 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 77f31b6618..7b7a6fdc3e 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -158,6 +158,10 @@ export interface ConfigProviderProps {
className?: string;
style?: React.CSSProperties;
};
+ result?: {
+ className?: string;
+ style?: React.CSSProperties;
+ };
}
interface ProviderChildrenProps extends ConfigProviderProps {
@@ -251,6 +255,7 @@ const ProviderChildren: React.FC = (props) => {
divider,
steps,
image,
+ result,
} = props;
// =================================== Warning ===================================
@@ -308,6 +313,7 @@ const ProviderChildren: React.FC = (props) => {
divider,
steps,
image,
+ result,
};
const config = {
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index e93a1222ed..6fc3deffbc 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -108,6 +108,7 @@ const {
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0 |
| image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| select | 设置 Select 组件的通用属性 | { showSearch?: boolean } | - | |
| 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 |
diff --git a/components/result/index.tsx b/components/result/index.tsx
index 08041a5ba4..f657dd7f2a 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -5,8 +5,8 @@ import WarningFilled from '@ant-design/icons/WarningFilled';
import classNames from 'classnames';
import * as React from 'react';
-import { ConfigContext } from '../config-provider';
import warning from '../_util/warning';
+import { ConfigContext } from '../config-provider';
import noFound from './noFound';
import serverError from './serverError';
@@ -118,7 +118,7 @@ const Result: ResultType = ({
icon,
extra,
}) => {
- const { getPrefixCls, direction } = React.useContext(ConfigContext);
+ const { getPrefixCls, direction, result } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('result', customizePrefixCls);
@@ -129,13 +129,16 @@ const Result: ResultType = ({
prefixCls,
`${prefixCls}-${status}`,
customizeClassName,
+ result?.className,
rootClassName,
{ [`${prefixCls}-rtl`]: direction === 'rtl' },
hashId,
);
+ const mergedStyle: React.CSSProperties = { ...result?.style, ...style };
+
return wrapSSR(
-
+
{title}
{subTitle &&
{subTitle}
}