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}
}