From 5c5cf36b0018a86938dbccec897b32b631d96059 Mon Sep 17 00:00:00 2001
From: Adrien David <16332780+adridavid@users.noreply.github.com>
Date: Thu, 12 Mar 2020 23:43:03 +0100
Subject: [PATCH] Fix: use theme props instead of default props

---
 .../src/withStyles/withStyles.js              | 10 +++----
 .../src/withStyles/withStyles.test.js         | 27 +++++++++++++++++++
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/packages/material-ui-styles/src/withStyles/withStyles.js b/packages/material-ui-styles/src/withStyles/withStyles.js
index bb280fbeb634d4..160c0565621910 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.js
+++ b/packages/material-ui-styles/src/withStyles/withStyles.js
@@ -45,7 +45,10 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
 
   const WithStyles = React.forwardRef(function WithStyles(props, ref) {
     const { classes: classesProp, innerRef, ...other } = props;
-    const classes = useStyles(props);
+    // The wrapper receives only user supplied props, which could be a subset of
+    // the actual props Component might receive due to merging with defaultProps.
+    // So copying it here would give us the same result in the wrapper as well.
+    const classes = useStyles({ ...Component.defaultProps, ...props });
 
     let theme;
     let more = other;
@@ -91,11 +94,6 @@ const withStyles = (stylesOrCreator, options = {}) => Component => {
     }),
   };
 
-  // The wrapper receives only user supplied props, which could be a subset of
-  // the actual props Component might receive due to merging with defaultProps.
-  // So copying it here would give us the same result in the wrapper as well.
-  WithStyles.defaultProps = Component.defaultProps;
-
   if (process.env.NODE_ENV !== 'production') {
     WithStyles.displayName = `WithStyles(${getDisplayName(Component)})`;
   }
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.test.js b/packages/material-ui-styles/src/withStyles/withStyles.test.js
index 899ef92112258f..d3913caa473f85 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.test.js
+++ b/packages/material-ui-styles/src/withStyles/withStyles.test.js
@@ -191,6 +191,33 @@ describe('withStyles', () => {
       wrapper.unmount();
     });
 
+    it('should use theme.props instead of defaultProps', () => {
+      const MuiFoo = () => <div />;
+      MuiFoo.defaultProps = {
+        foo: 'foo',
+      };
+
+      const styles = { root: { display: 'flex' } };
+      const StyledComponent = withStyles(styles, { name: 'MuiFoo' })(MuiFoo);
+
+      const wrapper = mount(
+        <ThemeProvider
+          theme={createMuiTheme({
+            props: {
+              MuiFoo: {
+                foo: 'bar',
+              },
+            },
+          })}
+        >
+          <StyledComponent foo={undefined} />
+        </ThemeProvider>,
+      );
+
+      assert.strictEqual(wrapper.find(MuiFoo).props().foo, 'bar');
+      wrapper.unmount();
+    });
+
     it('should work when depending on a theme', () => {
       const styles = theme => ({ root: { padding: theme.spacing(1) } });
       const StyledComponent = withStyles(styles, { name: 'MuiTextField' })(Empty);