feat: config-provider support Modal className and style properties (#43219)

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

@@ -10,6 +10,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';
@@ -289,6 +290,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

@@ -95,6 +95,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

@@ -113,6 +113,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

@@ -144,6 +144,7 @@ export interface ConfigProviderProps {
   steps?: ComponentStyleConfig;
   image?: ComponentStyleConfig;
   mentions?: ComponentStyleConfig;
+  modal?: ComponentStyleConfig;
   result?: ComponentStyleConfig;
   slider?: ComponentStyleConfig;
   breadcrumb?: ComponentStyleConfig;
@@ -249,6 +250,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     mentions,
+    modal,
     result,
     slider,
     breadcrumb,
@@ -317,6 +319,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
     steps,
     image,
     mentions,
+    modal,
     result,
     slider,
     breadcrumb,

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

@@ -115,6 +115,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>,