Better types for withStyles WIP - no merge yet -

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { WithTheme } from '../styles/withTheme';
-import { ConsistentWith, Overwrite } from '..';
+import { ConsistentWith, Overwrite, Omit } from '..';
 import { Theme } from './createMuiTheme';
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
@@ -48,16 +48,30 @@ export type WithStyles<T extends string | StyleRules | StyleRulesCallback = stri
   >;
 };
 
+// Theme is mandatory
+export type WithStylesAndTheme<T extends string | StyleRules | StyleRulesCallback = string> = WithStyles<T> & WithTheme;
+
 export interface StyledComponentProps<ClassKey extends string = string> {
   classes?: Partial<ClassNameMap<ClassKey>>;
   innerRef?: React.Ref<any> | React.RefObject<any>;
 }
 
-export default function withStyles<ClassKey extends string>(
+declare function withStyles<ClassKey extends string>(
   style: StyleRulesCallback<ClassKey> | StyleRules<ClassKey>,
-  options?: WithStylesOptions<ClassKey>,
+  options: WithStylesOptions<ClassKey> & { withTheme: true },
+): {
+  <P extends ConsistentWith<P, StyledComponentProps<ClassKey>>>(
+    component: React.ComponentType<P & WithStyles<ClassKey> & WithTheme>,
+  ): React.ComponentType<Omit<Overwrite<P, StyledComponentProps<ClassKey>>, "theme" | "classes">>;
+};
+
+declare function withStyles<ClassKey extends string>(
+  style: StyleRulesCallback<ClassKey> | StyleRules<ClassKey>,
+  options?: WithStylesOptions<ClassKey> & { withTheme?: false },
 ): {
   <P extends ConsistentWith<P, StyledComponentProps<ClassKey>>>(
     component: React.ComponentType<P & WithStyles<ClassKey>>,
-  ): React.ComponentType<Overwrite<P, StyledComponentProps<ClassKey>>>;
+  ): React.ComponentType<Omit<Overwrite<P, StyledComponentProps<ClassKey>>, "classes">>;
 };
+
+export default withStyles;

packages/material-ui/src/styles/withStylesPlayground.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+
+import withStyles, { WithStylesAndTheme } from './withStyles';
+import { Theme } from '.';
+import createStyles from './createStyles';
+
+const baseStyles = createStyles({
+  root: {
+    fontSize: 5,
+  },
+  title: {
+    borderStyle: 'solid',
+  },
+});
+
+interface IProps extends WithStylesAndTheme<typeof baseStyles> {
+  title: string;
+}
+
+function FooWithTheme({ theme, classes, title }: IProps) {
+  return (
+    <div className={classes.title} title={`theme is here!` + theme.direction}>
+      {title}
+    </div>
+  );
+}
+
+// theme and classes are missing here
+[<FooWithTheme title={'bla'} />];
+
+const Foo = withStyles(baseStyles, { withTheme: true })(FooWithTheme);
+
+// theme and classes are NOT missing here.
+[<Foo title={'bla'} />];
+
+
+// theme is NOT available, as  withTheme is not true
+withStyles(baseStyles, { withTheme: false })((props) => <div>{props.theme.direction}</div>);
+
+// theme IS available, as withTheme is true
+withStyles(baseStyles, { withTheme: true })((props) => <div>{props.theme.direction}</div>);
+
+const Foo2  = withStyles(baseStyles, { withTheme: false })(FooWithTheme);
+const Foo3  = withStyles(baseStyles)(FooWithTheme);
+
+// theme is mandatory! due to withTheme: false / missing
+[<Foo2 title={"title"}/>, <Foo3 title="title" />]