[core] Fix withStyles not including props

docs/src/pages/styles/basics/AdaptingHOC.js

@@ -29,18 +29,16 @@ function MyButtonRaw(props) {
 
 MyButtonRaw.propTypes = {
   classes: PropTypes.object.isRequired,
-  color: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(['red', 'blue']).isRequired,
 };
 
 const MyButton = withStyles(styles)(MyButtonRaw);
 
-function AdaptingHOC() {
+export default function AdaptingHOC() {
   return (
     <React.Fragment>
       <MyButton color="red">Red</MyButton>
       <MyButton color="blue">Blue</MyButton>
     </React.Fragment>
   );
 }
-
-export default AdaptingHOC;

docs/src/pages/styles/basics/AdaptingHOC.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyles, WithStyles } from '@material-ui/styles';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { Omit } from '@material-ui/types';
+
+const styles = createStyles({
+  root: {
+    background: (props: MyButtonRawProps) =>
+      props.color === 'red'
+        ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+        : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+    border: 0,
+    borderRadius: 3,
+    boxShadow: (props: MyButtonRawProps) =>
+      props.color === 'red'
+        ? '0 3px 5px 2px rgba(255, 105, 135, .3)'
+        : '0 3px 5px 2px rgba(33, 203, 243, .3)',
+    color: 'white',
+    height: 48,
+    padding: '0 30px',
+    margin: 8,
+  },
+});
+
+interface MyButtonRawProps {
+  color: 'red' | 'blue';
+}
+
+function MyButtonRaw(props: WithStyles<typeof styles> & Omit<ButtonProps, keyof MyButtonRawProps>) {
+  const { classes, color, ...other } = props;
+  return <Button className={classes.root} {...other} />;
+}
+
+(MyButtonRaw as any).propTypes = {
+  classes: PropTypes.object.isRequired,
+  color: PropTypes.oneOf(['red', 'blue']).isRequired,
+};
+
+const MyButton = withStyles(styles)(MyButtonRaw);
+
+export default function AdaptingHOC() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}

packages/material-ui-styles/src/withStyles/withStyles.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PropInjector } from '@material-ui/types';
+import { PropInjector, CoerceEmptyInterface } from '@material-ui/types';
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
 
@@ -70,7 +70,9 @@ export type ClassKeyOfStyles<StylesOrClassKey> = StylesOrClassKey extends string
 /**
  * infers the type of the theme used in the styles
  */
-export type PropsOfStyles<StylesType> = StylesType extends Styles<any, infer Props> ? Props : {};
+export type PropsOfStyles<StylesType> = StylesType extends Styles<any, infer Props>
+  ? CoerceEmptyInterface<Props>
+  : {};
 /**
  * infers the type of the props used in the styles
  */
@@ -97,5 +99,5 @@ export default function withStyles<
   options?: Options,
 ): PropInjector<
   WithStyles<StylesType, Options['withTheme']>,
-  StyledComponentProps<ClassKeyOfStyles<StylesType>>
+  StyledComponentProps<ClassKeyOfStyles<StylesType>> & PropsOfStyles<StylesType>
 >;

packages/material-ui/src/styles/withStyles.d.ts

@@ -1,4 +1,4 @@
-import { PropInjector } from '@material-ui/types';
+import { PropInjector, CoerceEmptyInterface } from '@material-ui/types';
 import { Theme } from './createMuiTheme';
 import {
   CreateCSSProperties,
@@ -45,4 +45,7 @@ export default function withStyles<
 >(
   style: Styles<Theme, Props, ClassKey>,
   options?: Options,
-): PropInjector<WithStyles<ClassKey, Options['withTheme']>, StyledComponentProps<ClassKey>>;
+): PropInjector<
+  WithStyles<ClassKey, Options['withTheme']>,
+  StyledComponentProps<ClassKey> & CoerceEmptyInterface<Props>
+>;