[styles] Fix theme default props overriden by Component default props

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)})`;
   }

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);