[Modal] Support theme default props (#17337)

mui · Sep 6, 2019 · f8076d6 · f8076d6
1 parent e0f03d7
commit f8076d6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { useTheme } from '@material-ui/styles';
+import { getThemeProps, useTheme } from '@material-ui/styles';
 import { elementAcceptingRef } from '@material-ui/utils';
 import ownerDocument from '../utils/ownerDocument';
 import Portal from '../Portal';
@@ -55,7 +55,9 @@ export const styles = theme => ({
  *
  * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
  */
-const Modal = React.forwardRef(function Modal(props, ref) {
+const Modal = React.forwardRef(function Modal(inProps, ref) {
+  const theme = useTheme();
+  const props = getThemeProps({ name: 'MuiModal', props: { ...inProps }, theme });
   const {
     BackdropComponent = SimpleBackdrop,
     BackdropProps,
@@ -80,7 +82,6 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     ...other
   } = props;
 
-  const theme = useTheme();
   const [exited, setExited] = React.useState(true);
   const modal = React.useRef({});
   const mountNodeRef = React.useRef(null);

diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js
@@ -4,7 +4,9 @@ import { useFakeTimers, spy } from 'sinon';
 import PropTypes from 'prop-types';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { cleanup, createClientRender } from 'test/utils/createClientRender';
+import { createMuiTheme } from '@material-ui/core/styles';
 import { createMount, findOutermostIntrinsic } from '@material-ui/core/test-utils';
+import { ThemeProvider } from '@material-ui/styles';
 import describeConformance from '../test-utils/describeConformance';
 import Fade from '../Fade';
 import Backdrop from '../Backdrop';
@@ -50,6 +52,22 @@ describe('<Modal />', () => {
     }),
   );
 
+  describe('props', () => {
+    it('should consume theme default props', () => {
+      const container = document.createElement('div');
+      const theme = createMuiTheme({ props: { MuiModal: { container } } });
+      mount(
+        <ThemeProvider theme={theme}>
+          <Modal open>
+            <p id="content">Hello World</p>
+          </Modal>
+        </ThemeProvider>,
+      );
+
+      assert.strictEqual(container.textContent, 'Hello World');
+    });
+  });
+
   describe('prop: open', () => {
     it('should not render the children by default', () => {
       const wrapper = mount(