feat: config-provider support Modal className and style properties

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

@@ -9,6 +9,7 @@ import Divider from '../../divider';
 import Empty from '../../empty';
 import Image from '../../image';
 import Mentions from '../../mentions';
+import Modal from '../../modal';
 import Pagination from '../../pagination';
 import Radio from '../../radio';
 import Result from '../../result';
@@ -241,6 +242,29 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-mentions')).toHaveStyle({ background: 'red' });
   });
 
+  it('Should Modal className & style works', () => {
+    const { baseElement } = render(
+      <ConfigProvider
+        modal={{
+          className: 'cp-modal',
+          style: {
+            background: 'red',
+          },
+        }}
+      >
+        <Modal title="Basic Modal" open>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Modal>
+      </ConfigProvider>,
+    );
+
+    const element = baseElement.querySelector<HTMLDivElement>('.ant-modal');
+    expect(element).toHaveClass('cp-modal');
+    expect(element).toHaveStyle({ background: 'red' });
+  });
+
   it('Should Result className & style works', () => {
     const { container } = render(
       <ConfigProvider result={{ className: 'cp-result', style: { backgroundColor: 'red' } }}>

components/config-provider/context.ts

@@ -94,6 +94,7 @@ export interface ConfigConsumerProps {
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
+  modal?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;

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

@@ -112,6 +112,7 @@ const {
 | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
 | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| modal | Set Modal common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | Set Radio common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | Set Result common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/config-provider/index.tsx

@@ -143,6 +143,7 @@ export interface ConfigProviderProps {
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
+  modal?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
@@ -247,6 +248,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     mentions,
+    modal,
     result,
     slider,
     breadcrumb,
@@ -314,6 +316,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     mentions,
+    modal,
     result,
     slider,
     breadcrumb,

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

@@ -114,6 +114,7 @@ const {
 | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | input | 设置 Input 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

components/modal/Modal.tsx

@@ -39,6 +39,7 @@ const Modal: React.FC<ModalProps> = (props) => {
     getPopupContainer: getContextPopupContainer,
     getPrefixCls,
     direction,
+    modal,
   } = React.useContext(ConfigContext);
 
   const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -68,7 +69,7 @@ const Modal: React.FC<ModalProps> = (props) => {
     closeIcon,
     closable,
     focusTriggerAfterClose = true,
-
+    style,
     // Deprecated
     visible,
 
@@ -121,7 +122,8 @@ const Modal: React.FC<ModalProps> = (props) => {
           focusTriggerAfterClose={focusTriggerAfterClose}
           transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
           maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
-          className={classNames(hashId, className)}
+          className={classNames(hashId, className, modal?.className)}
+          style={{ ...modal?.style, ...style }}
         />
       </NoFormStyle>
     </NoCompactStyle>,