From 5ce2af315b978294376f1a1658a4e42b1869fe8b Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Thu, 2 May 2019 15:07:37 +0200
Subject: [PATCH 01/17] [styles] Update type definition to let CSS properties
 be functions

---
 packages/material-ui-styles/src/styled/styled.d.ts   |  4 +++-
 .../src/withStyles/withStyles.d.ts                   | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui-styles/src/styled/styled.d.ts b/packages/material-ui-styles/src/styled/styled.d.ts
index 73068b41f70ab6..a25974b8dc0472 100644
--- a/packages/material-ui-styles/src/styled/styled.d.ts
+++ b/packages/material-ui-styles/src/styled/styled.d.ts
@@ -10,7 +10,9 @@ import * as React from 'react';
  * @internal
  */
 export type ComponentCreator<C extends React.ElementType> = <Theme, Props extends {} = any>(
-  styles: CSSProperties | (({ theme, ...props }: { theme: Theme } & Props) => CSSProperties),
+  styles:
+    | CSSProperties<Props>
+    | (({ theme, ...props }: { theme: Theme } & Props) => CSSProperties<Props>),
   options?: WithStylesOptions<Theme>,
 ) => React.ComponentType<
   Omit<JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>, 'classes' | 'className'> &
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index a491421267be14..3bb01bd6630ca0 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -3,9 +3,15 @@ import { PropInjector } from '@material-ui/types';
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
 
-export interface CSSProperties extends CSS.Properties<number | string> {
+export type BaseCSSProperties<Props extends {} = {}> = {
+  [P in keyof CSS.Properties<number | string>]:
+    | CSS.Properties<number | string>[P]
+    | ((props: Props) => CSS.Properties<number | string>[P])
+};
+
+export interface CSSProperties<Props extends {} = {}> extends BaseCSSProperties<Props> {
   // Allow pseudo selectors and media queries
-  [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
+  [k: string]: BaseCSSProperties<Props>[keyof BaseCSSProperties<Props>] | CSSProperties<Props>;
 }
 
 /**
@@ -18,7 +24,7 @@ export interface CSSProperties extends CSS.Properties<number | string> {
  */
 export type StyleRules<Props extends object, ClassKey extends string = string> = Record<
   ClassKey,
-  CSSProperties | ((props: Props) => CSSProperties)
+  CSSProperties<Props> | ((props: Props) => CSSProperties<Props>)
 >;
 
 /**

From ae8ca12a266df89c6d48dc4edc001a720157481a Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Thu, 2 May 2019 15:08:01 +0200
Subject: [PATCH 02/17] Restore AdaptingHook

---
 .../pages/css-in-js/basics/AdaptingHook.tsx   | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 docs/src/pages/css-in-js/basics/AdaptingHook.tsx

diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
new file mode 100644
index 00000000000000..afb9d880d6ddc9
--- /dev/null
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+interface Props {
+  color: string;
+}
+
+const useStyles = makeStyles({
+  root: {
+    background: (props: Props) =>
+      props.color === 'red'
+        ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+        : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+    border: 0,
+    borderRadius: 3,
+    boxShadow: (props: Props) =>
+      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,
+  },
+});
+
+function MyButton(props: Props & Omit<ButtonProps, 'color'>) {
+  const { color, ...other } = props;
+  const classes = useStyles(props);
+  return <Button className={classes.root} {...other} />;
+}
+
+(MyButton as any).propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
+function AdaptingHook() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}
+
+export default AdaptingHook;

From 8fe5f3dc61abf3bc767fa47ba0cf1eda1f28a8a6 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Thu, 2 May 2019 17:35:08 +0200
Subject: [PATCH 03/17] [docs] Updated AdaptingHook

---
 docs/src/pages/css-in-js/basics/AdaptingHook.tsx | 11 +++++++----
 docs/src/pages/styles/basics/AdaptingHook.js     |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
index afb9d880d6ddc9..f030a0a32480d6 100644
--- a/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
-import Button, { ButtonProps } from '@material-ui/core/Button';
+import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
 
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
 interface Props {
-  color: string;
+  color: 'red' | 'blue';
 }
 
+type MyButtonProps = Props & Omit<MuiButtonProps, keyof Props>;
+
 const useStyles = makeStyles({
   root: {
     background: (props: Props) =>
@@ -27,14 +30,14 @@ const useStyles = makeStyles({
   },
 });
 
-function MyButton(props: Props & Omit<ButtonProps, 'color'>) {
+function MyButton(props: MyButtonProps) {
   const { color, ...other } = props;
   const classes = useStyles(props);
   return <Button className={classes.root} {...other} />;
 }
 
 (MyButton as any).propTypes = {
-  color: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(['red', 'blue']).isRequired,
 };
 
 function AdaptingHook() {
diff --git a/docs/src/pages/styles/basics/AdaptingHook.js b/docs/src/pages/styles/basics/AdaptingHook.js
index a828f6d4828c82..f8d666b5ca6def 100644
--- a/docs/src/pages/styles/basics/AdaptingHook.js
+++ b/docs/src/pages/styles/basics/AdaptingHook.js
@@ -29,7 +29,7 @@ function MyButton(props) {
 }
 
 MyButton.propTypes = {
-  color: PropTypes.string.isRequired,
+  color: PropTypes.oneOf(['red', 'blue']).isRequired,
 };
 
 function AdaptingHook() {

From 3465ea690becbcf9d8dc860bed508967dc7d42a4 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Thu, 2 May 2019 17:35:55 +0200
Subject: [PATCH 04/17] [docs] Added AdaptingStyledComponents typescript demo

---
 .../basics/AdaptingStyledComponents.tsx       | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx

diff --git a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
new file mode 100644
index 00000000000000..8af52b708c4423
--- /dev/null
+++ b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
+
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
+
+interface Props {
+  color: 'red' | 'blue';
+}
+
+type MyButtonProps = Props & Omit<MuiButtonProps, keyof Props>;
+
+const MyButton = styled(({ color, ...other }: MyButtonProps) => <Button {...other} />)({
+  background: (props: Props) =>
+    props.color === 'red'
+      ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+      : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: (props: Props) =>
+    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,
+});
+
+function AdaptingStyledComponents() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}
+
+export default AdaptingStyledComponents;

From ae7ffa97e9a4cad8fa4fd59839bcc5bdb04d2c8a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 3 May 2019 11:30:39 +0200
Subject: [PATCH 05/17] Consistent Props base type

---
 .../material-ui-styles/src/withStyles/withStyles.d.ts     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 3bb01bd6630ca0..22e4fa5f2cbb9c 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -3,13 +3,13 @@ import { PropInjector } from '@material-ui/types';
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
 
-export type BaseCSSProperties<Props extends {} = {}> = {
+export type BaseCSSProperties<Props extends object = {}> = {
   [P in keyof CSS.Properties<number | string>]:
     | CSS.Properties<number | string>[P]
     | ((props: Props) => CSS.Properties<number | string>[P])
 };
 
-export interface CSSProperties<Props extends {} = {}> extends BaseCSSProperties<Props> {
+export interface CSSProperties<Props extends object = {}> extends BaseCSSProperties<Props> {
   // Allow pseudo selectors and media queries
   [k: string]: BaseCSSProperties<Props>[keyof BaseCSSProperties<Props>] | CSSProperties<Props>;
 }
@@ -34,7 +34,7 @@ export type StyleRulesCallback<Theme, Props extends object, ClassKey extends str
   theme: Theme,
 ) => StyleRules<Props, ClassKey>;
 
-export type Styles<Theme, Props extends {}, ClassKey extends string = string> =
+export type Styles<Theme, Props extends object, ClassKey extends string = string> =
   | StyleRules<Props, ClassKey>
   | StyleRulesCallback<Theme, Props, ClassKey>;
 
@@ -50,7 +50,7 @@ export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, st
 /**
  * @internal
  */
-export type ClassKeyInferable<Theme, Props extends {}> = string | Styles<Theme, Props>;
+export type ClassKeyInferable<Theme, Props extends object> = string | Styles<Theme, Props>;
 export type ClassKeyOfStyles<S> = S extends string
   ? S
   : S extends StyleRulesCallback<any, any, infer K>

From 3e2c89c273f1dd120cb7751e02d754ae4d532bcb Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 00:22:02 +0200
Subject: [PATCH 06/17] [styles] Add test case

---
 .../material-ui-styles/test/styles.spec.tsx   | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui-styles/test/styles.spec.tsx b/packages/material-ui-styles/test/styles.spec.tsx
index 237a8565447154..bdd03816e14013 100644
--- a/packages/material-ui-styles/test/styles.spec.tsx
+++ b/packages/material-ui-styles/test/styles.spec.tsx
@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { createStyles, withStyles, withTheme, WithTheme, WithStyles } from '@material-ui/styles';
+import {
+  createStyles,
+  withStyles,
+  withTheme,
+  WithTheme,
+  WithStyles,
+  makeStyles,
+} from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import { Theme } from '@material-ui/core/styles';
 
@@ -419,3 +426,26 @@ function forwardRefTest() {
   // especially since `innerRef` will be removed in v5 and is equivalent to `ref`
   <StyledRefableAnchor innerRef={buttonRef} />;
 }
+
+{
+  // https://github.com/mui-org/material-ui/pull/15546
+  // Update type definition to let CSS properties be functions
+  interface testProps {
+    foo: boolean;
+  }
+  const useStyles = makeStyles((theme: Theme) => ({
+    root: {
+      width: (prop: testProps) => (prop.foo ? 100 : 0),
+    },
+    root2: (prop2: testProps) => ({
+      width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0),
+      height: 100,
+    }),
+  }));
+
+  const styles = useStyles({ foo: true });
+  // $ExpectType string
+  const root = styles.root;
+  // $ExpectType string
+  const root2 = styles.root2;
+}

From 00e8b1b61c423c581ef67cca21797751cdec3a35 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 00:23:11 +0200
Subject: [PATCH 07/17] docs:typescript:formatted

---
 .../pages/css-in-js/basics/AdaptingHook.js    | 44 +++++++++++++++++++
 .../basics/AdaptingStyledComponents.js        | 31 +++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 docs/src/pages/css-in-js/basics/AdaptingHook.js
 create mode 100644 docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js

diff --git a/docs/src/pages/css-in-js/basics/AdaptingHook.js b/docs/src/pages/css-in-js/basics/AdaptingHook.js
new file mode 100644
index 00000000000000..f8d666b5ca6def
--- /dev/null
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/styles';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles({
+  root: {
+    background: props =>
+      props.color === 'red'
+        ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+        : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+    border: 0,
+    borderRadius: 3,
+    boxShadow: props =>
+      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,
+  },
+});
+
+function MyButton(props) {
+  const { color, ...other } = props;
+  const classes = useStyles(props);
+  return <Button className={classes.root} {...other} />;
+}
+
+MyButton.propTypes = {
+  color: PropTypes.oneOf(['red', 'blue']).isRequired,
+};
+
+function AdaptingHook() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}
+
+export default AdaptingHook;
diff --git a/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js
new file mode 100644
index 00000000000000..cd0985e45e1c00
--- /dev/null
+++ b/docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button from '@material-ui/core/Button';
+
+const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
+  background: props =>
+    props.color === 'red'
+      ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+      : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: props =>
+    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,
+});
+
+function AdaptingStyledComponents() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}
+
+export default AdaptingStyledComponents;

From bc22f33ade835d2123bc4cfa235474a758abc096 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 14:13:14 +0200
Subject: [PATCH 08/17] Fix types for core

---
 .../material-ui-styles/src/styled/styled.d.ts |  6 +-
 .../src/withStyles/withStyles.d.ts            | 13 ++-
 .../material-ui/src/styles/createStyles.d.ts  | 12 +--
 .../material-ui/src/styles/withStyles.d.ts    | 23 +++--
 .../test/typescript/styles.spec.tsx           | 88 ++++++++++++++++++-
 5 files changed, 116 insertions(+), 26 deletions(-)

diff --git a/packages/material-ui-styles/src/styled/styled.d.ts b/packages/material-ui-styles/src/styled/styled.d.ts
index a25974b8dc0472..e0ce0a83dbbbec 100644
--- a/packages/material-ui-styles/src/styled/styled.d.ts
+++ b/packages/material-ui-styles/src/styled/styled.d.ts
@@ -1,6 +1,6 @@
 import { Omit } from '@material-ui/types';
 import {
-  CSSProperties,
+  CreateCSSProperties,
   StyledComponentProps,
   WithStylesOptions,
 } from '@material-ui/styles/withStyles';
@@ -11,8 +11,8 @@ import * as React from 'react';
  */
 export type ComponentCreator<C extends React.ElementType> = <Theme, Props extends {} = any>(
   styles:
-    | CSSProperties<Props>
-    | (({ theme, ...props }: { theme: Theme } & Props) => CSSProperties<Props>),
+    | CreateCSSProperties<Props>
+    | (({ theme, ...props }: { theme: Theme } & Props) => CreateCSSProperties<Props>),
   options?: WithStylesOptions<Theme>,
 ) => React.ComponentType<
   Omit<JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>, 'classes' | 'className'> &
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 22e4fa5f2cbb9c..1e4bbfbefd86bc 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -3,15 +3,22 @@ import { PropInjector } from '@material-ui/types';
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
 
+export interface CSSProperties extends CSS.Properties<number | string> {
+  // Allow pseudo selectors and media queries
+  [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
+}
+
 export type BaseCSSProperties<Props extends object = {}> = {
   [P in keyof CSS.Properties<number | string>]:
     | CSS.Properties<number | string>[P]
     | ((props: Props) => CSS.Properties<number | string>[P])
 };
 
-export interface CSSProperties<Props extends object = {}> extends BaseCSSProperties<Props> {
+export interface CreateCSSProperties<Props extends object = {}> extends BaseCSSProperties<Props> {
   // Allow pseudo selectors and media queries
-  [k: string]: BaseCSSProperties<Props>[keyof BaseCSSProperties<Props>] | CSSProperties<Props>;
+  [k: string]:
+    | BaseCSSProperties<Props>[keyof BaseCSSProperties<Props>]
+    | CreateCSSProperties<Props>;
 }
 
 /**
@@ -24,7 +31,7 @@ export interface CSSProperties<Props extends object = {}> extends BaseCSSPropert
  */
 export type StyleRules<Props extends object, ClassKey extends string = string> = Record<
   ClassKey,
-  CSSProperties<Props> | ((props: Props) => CSSProperties<Props>)
+  CreateCSSProperties<Props> | ((props: Props) => CreateCSSProperties<Props>)
 >;
 
 /**
diff --git a/packages/material-ui/src/styles/createStyles.d.ts b/packages/material-ui/src/styles/createStyles.d.ts
index 427c1f555f9099..99f966d4dc1a0d 100644
--- a/packages/material-ui/src/styles/createStyles.d.ts
+++ b/packages/material-ui/src/styles/createStyles.d.ts
@@ -1,11 +1,3 @@
-import { StyleRules } from './withStyles';
+import createStyles from '@material-ui/styles/createStyles';
 
-/**
- * This function doesn't really "do anything" at runtime, it's just the identity
- * function. Its only purpose is to defeat TypeScript's type widening when providing
- * style rules to `withStyles` which are a function of the `Theme`.
- *
- * @param styles a set of style mappings
- * @returns the same styles that were passed in
- */
-export default function createStyles<C extends string>(styles: StyleRules<C>): StyleRules<C>;
+export default createStyles;
diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index 58a4e8ff5bba49..75aadc0dc2be0e 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -3,11 +3,9 @@ import { PropInjector } from '@material-ui/types';
 import { Theme } from './createMuiTheme';
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
+import { CreateCSSProperties, CSSProperties } from '@material-ui/styles/withStyles';
 
-export interface CSSProperties extends CSS.Properties<number | string> {
-  // Allow pseudo selectors and media queries
-  [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
-}
+export { CSSProperties };
 
 /**
  * This is basically the API of JSS. It defines a Map<string, CSS>,
@@ -16,11 +14,14 @@ export interface CSSProperties extends CSS.Properties<number | string> {
  * - the `keys` are the class (names) that will be created
  * - the `values` are objects that represent CSS rules (`React.CSSProperties`).
  */
-export type StyleRules<ClassKey extends string = string> = Record<ClassKey, CSSProperties>;
+export type StyleRules<ClassKey extends string = string, Props extends object = {}> = Record<
+  ClassKey,
+  CreateCSSProperties<Props> | ((props: Props) => CreateCSSProperties<Props>)
+>;
 
-export type StyleRulesCallback<ClassKey extends string = string> = (
+export type StyleRulesCallback<ClassKey extends string = string, Props extends object = {}> = (
   theme: Theme,
-) => StyleRules<ClassKey>;
+) => StyleRules<ClassKey, Props>;
 
 export interface StylesCreator {
   create(theme: Theme, name: string): StyleRules;
@@ -56,7 +57,11 @@ export interface StyledComponentProps<ClassKey extends string = string> {
   innerRef?: React.Ref<any> | React.RefObject<any>;
 }
 
-export default function withStyles<ClassKey extends string, Options extends WithStylesOptions = {}>(
-  style: StyleRulesCallback<ClassKey> | StyleRules<ClassKey>,
+export default function withStyles<
+  ClassKey extends string,
+  Options extends WithStylesOptions = {},
+  Props extends object = {}
+>(
+  style: StyleRulesCallback<ClassKey, Props> | StyleRules<ClassKey, Props>,
   options?: Options,
 ): PropInjector<WithStyles<ClassKey, Options['withTheme']>, StyledComponentProps<ClassKey>>;
diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
index c1b71714d7122f..abc5eb259ec088 100644
--- a/packages/material-ui/test/typescript/styles.spec.tsx
+++ b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -264,8 +264,8 @@ withStyles(theme =>
     content: {
       minHeight: '100vh',
     },
+    // $ExpectError
     '@media (min-width: 960px)': {
-      // $ExpectError
       content: {
         display: 'flex',
       },
@@ -477,3 +477,89 @@ withStyles(theme =>
     };
   });
 }
+
+{
+  // https://github.com/mui-org/material-ui/pull/15546
+  // Update type definition to let CSS properties be functions
+  interface testProps {
+    foo: boolean;
+  }
+
+  // makeStyles accepts properties as functions
+  {
+    const useStyles = makeStyles({
+      root: {
+        width: (prop: testProps) => (prop.foo ? 100 : 0),
+      },
+      root2: (prop2: testProps) => ({
+        width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0),
+      }),
+    });
+
+    const styles = useStyles({ foo: true });
+    // $ExpectType string
+    const root = styles.root;
+    // $ExpectType string
+    const root2 = styles.root2;
+  }
+
+  // makeStyles accepts properties as functions using a callback
+  {
+    const useStyles = makeStyles(theme => ({
+      root: {
+        width: (prop: testProps) => (prop.foo ? 100 : 0),
+      },
+      root2: (prop2: testProps) => ({
+        width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0),
+        margin: theme.spacing(1),
+      }),
+    }));
+
+    const styles = useStyles({ foo: true });
+    // $ExpectType string
+    const root = styles.root;
+    // $ExpectType string
+    const root2 = styles.root2;
+  }
+
+  // createStyles accepts properties as functions
+  {
+    const styles = createStyles({
+      root: {
+        width: (prop: testProps) => (prop.foo ? 100 : 0),
+      },
+      root2: (prop2: testProps) => ({
+        width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0),
+      }),
+    });
+
+    // $ExpectType string
+    const root = makeStyles(styles)({ foo: true }).root;
+  }
+
+  // withStyles accepts properties as functions
+  {
+    withStyles({
+      root: {
+        width: (prop: testProps) => (prop.foo ? 100 : 0),
+      },
+      root2: (prop2: testProps) => ({
+        width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0),
+        margin: 8,
+      }),
+    });
+  }
+
+  // withStyles accepts properties as functions using a callback
+  {
+    withStyles(theme => ({
+      root: {
+        width: (prop: testProps) => (prop.foo ? 100 : 0),
+      },
+      root2: (prop2: testProps) => ({
+        width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0),
+        height: theme.spacing(1),
+      }),
+    }));
+  }
+}

From d6e84a6c227340d0972fef2c0c26dcecedd0114d Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 14:23:49 +0200
Subject: [PATCH 09/17] Reuse definition from styles

---
 .../material-ui/src/styles/withStyles.d.ts    | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index 75aadc0dc2be0e..538e1f7514d549 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -1,11 +1,17 @@
 import * as React from 'react';
-import { PropInjector } from '@material-ui/types';
+import { PropInjector, Omit } from '@material-ui/types';
 import { Theme } from './createMuiTheme';
 import * as CSS from 'csstype';
 import * as JSS from 'jss';
-import { CreateCSSProperties, CSSProperties } from '@material-ui/styles/withStyles';
+import {
+  CreateCSSProperties,
+  CSSProperties,
+  ClassNameMap,
+  StyledComponentProps,
+  WithStylesOptions as DefaultWithStylesOptions,
+} from '@material-ui/styles/withStyles';
 
-export { CSSProperties };
+export { CreateCSSProperties, CSSProperties, ClassNameMap, StyledComponentProps };
 
 /**
  * This is basically the API of JSS. It defines a Map<string, CSS>,
@@ -29,13 +35,7 @@ export interface StylesCreator {
   themingEnabled: boolean;
 }
 
-export interface WithStylesOptions extends JSS.StyleSheetFactoryOptions {
-  flip?: boolean;
-  withTheme?: boolean;
-  name?: string;
-}
-
-export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
+export type WithStylesOptions = Omit<DefaultWithStylesOptions<Theme>, 'defaultTheme'>;
 
 export type WithStyles<
   T extends string | StyleRules | StyleRulesCallback = string,
@@ -52,11 +52,6 @@ export type WithStyles<
   >;
 };
 
-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,
   Options extends WithStylesOptions = {},

From 1bb40e4b9699b6e7b2f04b086b551e9cdc7db3f8 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 14:28:53 +0200
Subject: [PATCH 10/17] Remove unused definition

---
 packages/material-ui/src/styles/withStyles.d.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index 538e1f7514d549..b6f14c584e7b5d 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -29,12 +29,6 @@ export type StyleRulesCallback<ClassKey extends string = string, Props extends o
   theme: Theme,
 ) => StyleRules<ClassKey, Props>;
 
-export interface StylesCreator {
-  create(theme: Theme, name: string): StyleRules;
-  options: { index: number };
-  themingEnabled: boolean;
-}
-
 export type WithStylesOptions = Omit<DefaultWithStylesOptions<Theme>, 'defaultTheme'>;
 
 export type WithStyles<

From 14d7e3cf22c938ece909c8d4932b197403544951 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 14:40:59 +0200
Subject: [PATCH 11/17] Reuse styleRules

---
 .../src/createStyles/createStyles.d.ts            |  4 ++--
 .../src/getStylesCreator/getStylesCreator.d.ts    |  2 +-
 .../src/withStyles/withStyles.d.ts                |  8 ++++----
 packages/material-ui/src/styles/withStyles.d.ts   | 15 ++-------------
 4 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/material-ui-styles/src/createStyles/createStyles.d.ts b/packages/material-ui-styles/src/createStyles/createStyles.d.ts
index 86471f434a7c39..e48703c25f1a05 100644
--- a/packages/material-ui-styles/src/createStyles/createStyles.d.ts
+++ b/packages/material-ui-styles/src/createStyles/createStyles.d.ts
@@ -12,5 +12,5 @@ import { StyleRules } from '@material-ui/styles/withStyles';
 // See https://github.com/mui-org/material-ui/issues/15942
 // and https://github.com/microsoft/TypeScript/issues/31735
 export default function createStyles<C extends string, P extends {}>(
-  styles: StyleRules<P, C>,
-): StyleRules<P, C>;
+  styles: StyleRules<C, P>,
+): StyleRules<C, P>;
diff --git a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts
index 6d52de78fce75a..6d88cb2ede9b5b 100644
--- a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts
+++ b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts
@@ -1,7 +1,7 @@
 import { StyleRules, Styles } from '@material-ui/styles/withStyles';
 
 export interface StylesCreator<Theme, Props extends object, ClassKey extends string = string> {
-  create: (theme: Theme, name: string) => StyleRules<Props, ClassKey>;
+  create: (theme: Theme, name: string) => StyleRules<ClassKey, Props>;
   options: {};
   themingEnabled: boolean;
 }
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 1e4bbfbefd86bc..994f6a0b294c94 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -29,7 +29,7 @@ export interface CreateCSSProperties<Props extends object = {}> extends BaseCSSP
  *
  * if only `CSSProperties` are matched `Props` are inferred to `any`
  */
-export type StyleRules<Props extends object, ClassKey extends string = string> = Record<
+export type StyleRules<ClassKey extends string = string, Props extends object = {}> = Record<
   ClassKey,
   CreateCSSProperties<Props> | ((props: Props) => CreateCSSProperties<Props>)
 >;
@@ -39,10 +39,10 @@ export type StyleRules<Props extends object, ClassKey extends string = string> =
  */
 export type StyleRulesCallback<Theme, Props extends object, ClassKey extends string = string> = (
   theme: Theme,
-) => StyleRules<Props, ClassKey>;
+) => StyleRules<ClassKey, Props>;
 
 export type Styles<Theme, Props extends object, ClassKey extends string = string> =
-  | StyleRules<Props, ClassKey>
+  | StyleRules<ClassKey, Props>
   | StyleRulesCallback<Theme, Props, ClassKey>;
 
 export interface WithStylesOptions<Theme> extends JSS.StyleSheetFactoryOptions {
@@ -62,7 +62,7 @@ export type ClassKeyOfStyles<S> = S extends string
   ? S
   : S extends StyleRulesCallback<any, any, infer K>
   ? K
-  : S extends StyleRules<any, infer K>
+  : S extends StyleRules<infer K>
   ? K
   : never;
 
diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index b6f14c584e7b5d..a9667b90f4baa0 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -9,21 +9,10 @@ import {
   ClassNameMap,
   StyledComponentProps,
   WithStylesOptions as DefaultWithStylesOptions,
+  StyleRules,
 } from '@material-ui/styles/withStyles';
 
-export { CreateCSSProperties, CSSProperties, ClassNameMap, StyledComponentProps };
-
-/**
- * This is basically the API of JSS. It defines a Map<string, CSS>,
- * where
- *
- * - the `keys` are the class (names) that will be created
- * - the `values` are objects that represent CSS rules (`React.CSSProperties`).
- */
-export type StyleRules<ClassKey extends string = string, Props extends object = {}> = Record<
-  ClassKey,
-  CreateCSSProperties<Props> | ((props: Props) => CreateCSSProperties<Props>)
->;
+export { CreateCSSProperties, CSSProperties, ClassNameMap, StyledComponentProps, StyleRules };
 
 export type StyleRulesCallback<ClassKey extends string = string, Props extends object = {}> = (
   theme: Theme,

From f33006d58154d6f747c80aeeccb956fa58de6a3a Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 15:15:29 +0200
Subject: [PATCH 12/17] Rename base

---
 packages/material-ui-styles/src/withStyles/withStyles.d.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 994f6a0b294c94..08401c3a4857bd 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -8,16 +8,17 @@ export interface CSSProperties extends CSS.Properties<number | string> {
   [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
 }
 
-export type BaseCSSProperties<Props extends object = {}> = {
+export type BaseCreateCSSProperties<Props extends object = {}> = {
   [P in keyof CSS.Properties<number | string>]:
     | CSS.Properties<number | string>[P]
     | ((props: Props) => CSS.Properties<number | string>[P])
 };
 
-export interface CreateCSSProperties<Props extends object = {}> extends BaseCSSProperties<Props> {
+export interface CreateCSSProperties<Props extends object = {}>
+  extends BaseCreateCSSProperties<Props> {
   // Allow pseudo selectors and media queries
   [k: string]:
-    | BaseCSSProperties<Props>[keyof BaseCSSProperties<Props>]
+    | BaseCreateCSSProperties<Props>[keyof BaseCreateCSSProperties<Props>]
     | CreateCSSProperties<Props>;
 }
 

From dc063eb81878042d07925f5b6ceed6ad403cf284 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Fri, 31 May 2019 15:28:45 +0200
Subject: [PATCH 13/17] Reuse StyleRulesCallback

---
 packages/material-ui/src/styles/withStyles.d.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index a9667b90f4baa0..99a93a41a60627 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -10,13 +10,18 @@ import {
   StyledComponentProps,
   WithStylesOptions as DefaultWithStylesOptions,
   StyleRules,
+  StyleRulesCallback as DefaultStyleRulesCallback,
 } from '@material-ui/styles/withStyles';
 
 export { CreateCSSProperties, CSSProperties, ClassNameMap, StyledComponentProps, StyleRules };
 
-export type StyleRulesCallback<ClassKey extends string = string, Props extends object = {}> = (
-  theme: Theme,
-) => StyleRules<ClassKey, Props>;
+/**
+ * @internal
+ */
+export type StyleRulesCallback<
+  ClassKey extends string = string,
+  Props extends object = {}
+> = DefaultStyleRulesCallback<Theme, Props, ClassKey>;
 
 export type WithStylesOptions = Omit<DefaultWithStylesOptions<Theme>, 'defaultTheme'>;
 

From 80f483f3449fdbd30fc91412fd96ffd0288975ee Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Sat, 1 Jun 2019 01:21:01 +0200
Subject: [PATCH 14/17] Reuse Styles and ClassKeyOfStyles

---
 .../material-ui/src/styles/withStyles.d.ts    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index 99a93a41a60627..da9926654b84c5 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -11,6 +11,8 @@ import {
   WithStylesOptions as DefaultWithStylesOptions,
   StyleRules,
   StyleRulesCallback as DefaultStyleRulesCallback,
+  Styles as DefaultStyles,
+  ClassKeyOfStyles,
 } from '@material-ui/styles/withStyles';
 
 export { CreateCSSProperties, CSSProperties, ClassNameMap, StyledComponentProps, StyleRules };
@@ -23,21 +25,19 @@ export type StyleRulesCallback<
   Props extends object = {}
 > = DefaultStyleRulesCallback<Theme, Props, ClassKey>;
 
+export type Styles<ClassKey extends string = string, Props extends object = {}> = DefaultStyles<
+  Theme,
+  Props,
+  ClassKey
+>;
+
 export type WithStylesOptions = Omit<DefaultWithStylesOptions<Theme>, 'defaultTheme'>;
 
 export type WithStyles<
-  T extends string | StyleRules | StyleRulesCallback = string,
+  T extends string | Styles = string,
   IncludeTheme extends boolean | undefined = false
 > = (IncludeTheme extends true ? { theme: Theme } : {}) & {
-  classes: ClassNameMap<
-    T extends string
-      ? T
-      : T extends StyleRulesCallback<infer K>
-      ? K
-      : T extends StyleRules<infer K>
-      ? K
-      : never
-  >;
+  classes: ClassNameMap<ClassKeyOfStyles<T>>;
 };
 
 export default function withStyles<
@@ -45,6 +45,6 @@ export default function withStyles<
   Options extends WithStylesOptions = {},
   Props extends object = {}
 >(
-  style: StyleRulesCallback<ClassKey, Props> | StyleRules<ClassKey, Props>,
+  style: Styles<ClassKey, Props>,
   options?: Options,
 ): PropInjector<WithStyles<ClassKey, Options['withTheme']>, StyledComponentProps<ClassKey>>;

From 3a95a228140f76d3faae2fb31bcb8dedaf01d460 Mon Sep 17 00:00:00 2001
From: merceyz <merceyz@users.noreply.github.com>
Date: Thu, 6 Jun 2019 21:26:30 +0200
Subject: [PATCH 15/17] [core] Cleanup withStyles

---
 .../material-ui/src/styles/withStyles.d.ts    | 25 +++++--------------
 .../test/typescript/components.spec.tsx       |  2 +-
 .../test/typescript/styles.spec.tsx           |  2 +-
 3 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index f8ca9837f68417..5d456ee17f5ceb 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { PropInjector } from '@material-ui/types';
 import { Theme } from './createMuiTheme';
 import {
@@ -8,8 +7,8 @@ import {
   StyledComponentProps,
   WithStylesOptions,
   StyleRules,
-  StyleRulesCallback as DefaultStyleRulesCallback,
-  Styles as DefaultStyles,
+  StyleRulesCallback,
+  Styles,
   ClassKeyOfStyles,
 } from '@material-ui/styles/withStyles';
 
@@ -19,25 +18,13 @@ export {
   ClassNameMap,
   StyledComponentProps,
   StyleRules,
+  Styles,
   WithStylesOptions,
+  StyleRulesCallback,
 };
 
-/**
- * @internal
- */
-export type StyleRulesCallback<
-  ClassKey extends string = string,
-  Props extends object = {}
-> = DefaultStyleRulesCallback<Theme, Props, ClassKey>;
-
-export type Styles<ClassKey extends string = string, Props extends object = {}> = DefaultStyles<
-  Theme,
-  Props,
-  ClassKey
->;
-
 export type WithStyles<
-  T extends string | Styles = string,
+  T extends string | Styles<any, any, any> = string,
   IncludeTheme extends boolean | undefined = false
 > = (IncludeTheme extends true ? { theme: Theme } : {}) & {
   classes: ClassNameMap<ClassKeyOfStyles<T>>;
@@ -48,6 +35,6 @@ export default function withStyles<
   Options extends WithStylesOptions<Theme> = {},
   Props extends object = {}
 >(
-  style: Styles<ClassKey, Props>,
+  style: Styles<Theme, Props, ClassKey>,
   options?: Options,
 ): PropInjector<WithStyles<ClassKey, Options['withTheme']>, StyledComponentProps<ClassKey>>;
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index 2f30decd0e7ab0..4f5a80add360b1 100644
--- a/packages/material-ui/test/typescript/components.spec.tsx
+++ b/packages/material-ui/test/typescript/components.spec.tsx
@@ -872,7 +872,7 @@ const TabsTest = () => {
 
   type ClassKey = 'root' | 'button';
 
-  const styles: StyleRulesCallback<ClassKey> = theme => ({
+  const styles: StyleRulesCallback<Theme, any, ClassKey> = theme => ({
     root: {
       flexGrow: 1,
       marginTop: theme.spacing(3),
diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
index abc5eb259ec088..0585739b6dad16 100644
--- a/packages/material-ui/test/typescript/styles.spec.tsx
+++ b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -396,7 +396,7 @@ withStyles(theme =>
 
 {
   // https://github.com/mui-org/material-ui/issues/11164
-  const style: StyleRulesCallback = theme => ({
+  const style: StyleRulesCallback<Theme, any, any> = theme => ({
     text: theme.typography.body2,
   });
 }

From 4d276d7c018ebcd0e554812a605bce01113cd307 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 7 Jun 2019 09:49:29 +0200
Subject: [PATCH 16/17] Name generic arguments

---
 .../src/createStyles/createStyles.d.ts        |  8 ++---
 .../material-ui-styles/src/styled/styled.d.ts | 11 ++++--
 .../src/withStyles/withStyles.d.ts            | 35 ++++++++++---------
 .../material-ui/src/styles/withStyles.d.ts    |  4 +--
 4 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/packages/material-ui-styles/src/createStyles/createStyles.d.ts b/packages/material-ui-styles/src/createStyles/createStyles.d.ts
index e48703c25f1a05..93570d3f818e29 100644
--- a/packages/material-ui-styles/src/createStyles/createStyles.d.ts
+++ b/packages/material-ui-styles/src/createStyles/createStyles.d.ts
@@ -8,9 +8,9 @@ import { StyleRules } from '@material-ui/styles/withStyles';
  * @param styles a set of style mappings
  * @returns the same styles that were passed in
  */
-// For TypeScript v3.5 P has to extend {} instead of object
+// For TypeScript v3.5 Props has to extend {} instead of object
 // See https://github.com/mui-org/material-ui/issues/15942
 // and https://github.com/microsoft/TypeScript/issues/31735
-export default function createStyles<C extends string, P extends {}>(
-  styles: StyleRules<C, P>,
-): StyleRules<C, P>;
+export default function createStyles<ClassKey extends string, Props extends {}>(
+  styles: StyleRules<ClassKey, Props>,
+): StyleRules<ClassKey, Props>;
diff --git a/packages/material-ui-styles/src/styled/styled.d.ts b/packages/material-ui-styles/src/styled/styled.d.ts
index e0ce0a83dbbbec..c0be94321bc2e0 100644
--- a/packages/material-ui-styles/src/styled/styled.d.ts
+++ b/packages/material-ui-styles/src/styled/styled.d.ts
@@ -9,13 +9,16 @@ import * as React from 'react';
 /**
  * @internal
  */
-export type ComponentCreator<C extends React.ElementType> = <Theme, Props extends {} = any>(
+export type ComponentCreator<Component extends React.ElementType> = <Theme, Props extends {} = any>(
   styles:
     | CreateCSSProperties<Props>
     | (({ theme, ...props }: { theme: Theme } & Props) => CreateCSSProperties<Props>),
   options?: WithStylesOptions<Theme>,
 ) => React.ComponentType<
-  Omit<JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>, 'classes' | 'className'> &
+  Omit<
+    JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
+    'classes' | 'className'
+  > &
     StyledComponentProps<'root'> & { className?: string }
 >;
 
@@ -23,4 +26,6 @@ export interface StyledProps {
   className: string;
 }
 
-export default function styled<C extends React.ElementType>(Component: C): ComponentCreator<C>;
+export default function styled<Component extends React.ElementType>(
+  Component: Component,
+): ComponentCreator<Component>;
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 08401c3a4857bd..5e82f6436c0b79 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -59,30 +59,30 @@ export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, st
  * @internal
  */
 export type ClassKeyInferable<Theme, Props extends object> = string | Styles<Theme, Props>;
-export type ClassKeyOfStyles<S> = S extends string
-  ? S
-  : S extends StyleRulesCallback<any, any, infer K>
-  ? K
-  : S extends StyleRules<infer K>
-  ? K
+export type ClassKeyOfStyles<StylesOrClassKey> = StylesOrClassKey extends string
+  ? StylesOrClassKey
+  : StylesOrClassKey extends StyleRulesCallback<any, any, infer ClassKey>
+  ? ClassKey
+  : StylesOrClassKey extends StyleRules<infer ClassKey>
+  ? ClassKey
   : never;
 
 /**
  * infers the type of the theme used in the styles
  */
-export type PropsOfStyles<S> = S extends Styles<any, infer Props> ? Props : {};
+export type PropsOfStyles<StylesType> = StylesType extends Styles<any, infer Props> ? Props : {};
 /**
  * infers the type of the props used in the styles
  */
-export type ThemeOfStyles<S> = S extends Styles<infer Theme, any> ? Theme : {};
+export type ThemeOfStyles<StylesType> = StylesType extends Styles<infer Theme, any> ? Theme : {};
 
 export type WithStyles<
-  S extends ClassKeyInferable<any, any>,
+  StylesType extends ClassKeyInferable<any, any>,
   IncludeTheme extends boolean | undefined = false
-> = (IncludeTheme extends true ? { theme: ThemeOfStyles<S> } : {}) & {
-  classes: ClassNameMap<ClassKeyOfStyles<S>>;
+> = (IncludeTheme extends true ? { theme: ThemeOfStyles<StylesType> } : {}) & {
+  classes: ClassNameMap<ClassKeyOfStyles<StylesType>>;
   innerRef?: React.Ref<any> | React.RefObject<any>;
-} & PropsOfStyles<S>;
+} & PropsOfStyles<StylesType>;
 
 export interface StyledComponentProps<ClassKey extends string = string> {
   classes?: Partial<ClassNameMap<ClassKey>>;
@@ -90,9 +90,12 @@ export interface StyledComponentProps<ClassKey extends string = string> {
 }
 
 export default function withStyles<
-  S extends Styles<any, any>,
-  Options extends WithStylesOptions<ThemeOfStyles<S>> = {}
+  StylesType extends Styles<any, any>,
+  Options extends WithStylesOptions<ThemeOfStyles<StylesType>> = {}
 >(
-  style: S,
+  style: StylesType,
   options?: Options,
-): PropInjector<WithStyles<S, Options['withTheme']>, StyledComponentProps<ClassKeyOfStyles<S>>>;
+): PropInjector<
+  WithStyles<StylesType, Options['withTheme']>,
+  StyledComponentProps<ClassKeyOfStyles<StylesType>>
+>;
diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index 5d456ee17f5ceb..b73f9506f73dee 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -24,10 +24,10 @@ export {
 };
 
 export type WithStyles<
-  T extends string | Styles<any, any, any> = string,
+  StylesOrClassKey extends string | Styles<any, any, any> = string,
   IncludeTheme extends boolean | undefined = false
 > = (IncludeTheme extends true ? { theme: Theme } : {}) & {
-  classes: ClassNameMap<ClassKeyOfStyles<T>>;
+  classes: ClassNameMap<ClassKeyOfStyles<StylesOrClassKey>>;
 };
 
 export default function withStyles<

From 912b97f8b28da941773c3321296758bf65edd552 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 7 Jun 2019 11:23:19 +0200
Subject: [PATCH 17/17] Make StyleRules from core backwards compatible

---
 .../src/createStyles/createStyles.d.ts               |  4 ++--
 .../src/getStylesCreator/getStylesCreator.d.ts       |  2 +-
 .../src/withStyles/withStyles.d.ts                   |  8 ++++----
 packages/material-ui/src/styles/withStyles.d.ts      | 12 ++++++++++--
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/material-ui-styles/src/createStyles/createStyles.d.ts b/packages/material-ui-styles/src/createStyles/createStyles.d.ts
index 93570d3f818e29..bdf32029e42caa 100644
--- a/packages/material-ui-styles/src/createStyles/createStyles.d.ts
+++ b/packages/material-ui-styles/src/createStyles/createStyles.d.ts
@@ -12,5 +12,5 @@ import { StyleRules } from '@material-ui/styles/withStyles';
 // See https://github.com/mui-org/material-ui/issues/15942
 // and https://github.com/microsoft/TypeScript/issues/31735
 export default function createStyles<ClassKey extends string, Props extends {}>(
-  styles: StyleRules<ClassKey, Props>,
-): StyleRules<ClassKey, Props>;
+  styles: StyleRules<Props, ClassKey>,
+): StyleRules<Props, ClassKey>;
diff --git a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts
index 6d88cb2ede9b5b..6d52de78fce75a 100644
--- a/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts
+++ b/packages/material-ui-styles/src/getStylesCreator/getStylesCreator.d.ts
@@ -1,7 +1,7 @@
 import { StyleRules, Styles } from '@material-ui/styles/withStyles';
 
 export interface StylesCreator<Theme, Props extends object, ClassKey extends string = string> {
-  create: (theme: Theme, name: string) => StyleRules<ClassKey, Props>;
+  create: (theme: Theme, name: string) => StyleRules<Props, ClassKey>;
   options: {};
   themingEnabled: boolean;
 }
diff --git a/packages/material-ui-styles/src/withStyles/withStyles.d.ts b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
index 5e82f6436c0b79..5111f4c9ef292a 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -30,7 +30,7 @@ export interface CreateCSSProperties<Props extends object = {}>
  *
  * if only `CSSProperties` are matched `Props` are inferred to `any`
  */
-export type StyleRules<ClassKey extends string = string, Props extends object = {}> = Record<
+export type StyleRules<Props extends object = {}, ClassKey extends string = string> = Record<
   ClassKey,
   CreateCSSProperties<Props> | ((props: Props) => CreateCSSProperties<Props>)
 >;
@@ -40,10 +40,10 @@ export type StyleRules<ClassKey extends string = string, Props extends object =
  */
 export type StyleRulesCallback<Theme, Props extends object, ClassKey extends string = string> = (
   theme: Theme,
-) => StyleRules<ClassKey, Props>;
+) => StyleRules<Props, ClassKey>;
 
 export type Styles<Theme, Props extends object, ClassKey extends string = string> =
-  | StyleRules<ClassKey, Props>
+  | StyleRules<Props, ClassKey>
   | StyleRulesCallback<Theme, Props, ClassKey>;
 
 export interface WithStylesOptions<Theme> extends JSS.StyleSheetFactoryOptions {
@@ -63,7 +63,7 @@ export type ClassKeyOfStyles<StylesOrClassKey> = StylesOrClassKey extends string
   ? StylesOrClassKey
   : StylesOrClassKey extends StyleRulesCallback<any, any, infer ClassKey>
   ? ClassKey
-  : StylesOrClassKey extends StyleRules<infer ClassKey>
+  : StylesOrClassKey extends StyleRules<any, infer ClassKey>
   ? ClassKey
   : never;
 
diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
index b73f9506f73dee..451f0c96663275 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -6,7 +6,7 @@ import {
   ClassNameMap,
   StyledComponentProps,
   WithStylesOptions,
-  StyleRules,
+  StyleRules as ActualStyleRules,
   StyleRulesCallback,
   Styles,
   ClassKeyOfStyles,
@@ -17,12 +17,20 @@ export {
   CSSProperties,
   ClassNameMap,
   StyledComponentProps,
-  StyleRules,
   Styles,
   WithStylesOptions,
   StyleRulesCallback,
 };
 
+/**
+ * Adapter for `StyleRules` from `@material-ui/styles` for backwards compatibility.
+ * Order of generic arguments is just reversed.
+ */
+export type StyleRules<
+  ClassKey extends string = string,
+  Props extends object = {}
+> = ActualStyleRules<Props, ClassKey>;
+
 export type WithStyles<
   StylesOrClassKey extends string | Styles<any, any, any> = string,
   IncludeTheme extends boolean | undefined = false