feat: config-provider support empty className and style propertie (#43061)

components/config-provider/__tests__/style.test.tsx

@@ -6,6 +6,7 @@ import Breadcrumb from '../../breadcrumb';
 import Checkbox from '../../checkbox';
 import Descriptions from '../../descriptions';
 import Divider from '../../divider';
+import Empty from '../../empty';
 import Image from '../../image';
 import Pagination from '../../pagination';
 import Result from '../../result';
@@ -303,4 +304,22 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-descriptions')).toHaveClass('cp-className');
     expect(container.querySelector('.ant-descriptions')).toHaveStyle({ background: 'red' });
   });
+
+  it('Should Empty className & style works', () => {
+    const { container } = render(
+      <ConfigProvider
+        empty={{
+          className: 'cp-className',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Empty />
+      </ConfigProvider>,
+    );
+
+    expect(container.querySelector('.ant-empty')).toHaveClass('cp-className');
+    expect(container.querySelector('.ant-empty')).toHaveStyle({ background: 'red' });
+  });
 });

components/config-provider/context.ts

@@ -98,6 +98,7 @@ export interface ConfigConsumerProps {
   breadcrumb?: ComponentStyleConfig;
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
+  empty?: ComponentStyleConfig;
 }
 
 const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

components/config-provider/index.en-US.md

@@ -107,6 +107,7 @@ const {
 | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | 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 |

components/config-provider/index.tsx

@@ -147,6 +147,7 @@ export interface ConfigProviderProps {
   breadcrumb?: ComponentStyleConfig;
   checkbox?: ComponentStyleConfig;
   descriptions?: ComponentStyleConfig;
+  empty?: ComponentStyleConfig;
 }
 
 interface ProviderChildrenProps extends ConfigProviderProps {
@@ -247,6 +248,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     slider,
     breadcrumb,
     pagination,
+    empty,
   } = props;
 
   // =================================== Warning ===================================
@@ -311,6 +313,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     slider,
     breadcrumb,
     pagination,
+    empty,
   };
 
   const config = {

components/config-provider/index.zh-CN.md

@@ -109,6 +109,7 @@ const {
 | checkbox | 设置 Checkbox 组件的通用属性 | { 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 |
+| empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | 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 |

components/empty/index.tsx

@@ -39,9 +39,10 @@ const Empty: CompoundedComponent = ({
   description,
   children,
   imageStyle,
+  style,
   ...restProps
 }) => {
-  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction, empty } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('empty', customizePrefixCls);
   const [wrapSSR, hashId] = useStyle(prefixCls);
@@ -64,6 +65,7 @@ const Empty: CompoundedComponent = ({
       className={classNames(
         hashId,
         prefixCls,
+        empty?.className,
         {
           [`${prefixCls}-normal`]: image === simpleEmptyImg,
           [`${prefixCls}-rtl`]: direction === 'rtl',
@@ -71,6 +73,7 @@ const Empty: CompoundedComponent = ({
         className,
         rootClassName,
       )}
+      style={{ ...empty?.style, ...style }}
       {...restProps}
     >
       <div className={`${prefixCls}-image`} style={imageStyle}>