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/AdaptingHook.tsx b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
new file mode 100644
index 00000000000000..f030a0a32480d6
--- /dev/null
+++ b/docs/src/pages/css-in-js/basics/AdaptingHook.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } 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 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: MyButtonProps) {
+  const { color, ...other } = props;
+  const classes = useStyles(props);
+  return <Button className={classes.root} {...other} />;
+}
+
+(MyButton as any).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;
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;
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() {
diff --git a/packages/material-ui-styles/src/createStyles/createStyles.d.ts b/packages/material-ui-styles/src/createStyles/createStyles.d.ts
index 86471f434a7c39..bdf32029e42caa 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<P, C>,
-): StyleRules<P, C>;
+export default function createStyles<ClassKey extends string, Props extends {}>(
+  styles: StyleRules<Props, ClassKey>,
+): StyleRules<Props, ClassKey>;
diff --git a/packages/material-ui-styles/src/styled/styled.d.ts b/packages/material-ui-styles/src/styled/styled.d.ts
index 73068b41f70ab6..c0be94321bc2e0 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';
@@ -9,11 +9,16 @@ 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),
+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 }
 >;
 
@@ -21,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 a491421267be14..5111f4c9ef292a 100644
--- a/packages/material-ui-styles/src/withStyles/withStyles.d.ts
+++ b/packages/material-ui-styles/src/withStyles/withStyles.d.ts
@@ -8,6 +8,20 @@ export interface CSSProperties extends CSS.Properties<number | string> {
   [k: string]: CSS.Properties<number | string>[keyof CSS.Properties] | CSSProperties;
 }
 
+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 BaseCreateCSSProperties<Props> {
+  // Allow pseudo selectors and media queries
+  [k: string]:
+    | BaseCreateCSSProperties<Props>[keyof BaseCreateCSSProperties<Props>]
+    | CreateCSSProperties<Props>;
+}
+
 /**
  * This is basically the API of JSS. It defines a Map<string, CSS>,
  * where
@@ -16,9 +30,9 @@ export interface CSSProperties extends CSS.Properties<number | string> {
  *
  * if only `CSSProperties` are matched `Props` are inferred to `any`
  */
-export type StyleRules<Props extends object, ClassKey extends string = string> = Record<
+export type StyleRules<Props extends object = {}, ClassKey extends string = string> = Record<
   ClassKey,
-  CSSProperties | ((props: Props) => CSSProperties)
+  CreateCSSProperties<Props> | ((props: Props) => CreateCSSProperties<Props>)
 >;
 
 /**
@@ -28,7 +42,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>;
 
@@ -44,31 +58,31 @@ export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, st
 /**
  * @internal
  */
-export type ClassKeyInferable<Theme, Props extends {}> = string | Styles<Theme, Props>;
-export type ClassKeyOfStyles<S> = S extends string
-  ? S
-  : S extends StyleRulesCallback<any, any, infer K>
-  ? K
-  : S extends StyleRules<any, infer K>
-  ? K
+export type ClassKeyInferable<Theme, Props extends object> = string | Styles<Theme, Props>;
+export type ClassKeyOfStyles<StylesOrClassKey> = StylesOrClassKey extends string
+  ? StylesOrClassKey
+  : StylesOrClassKey extends StyleRulesCallback<any, any, infer ClassKey>
+  ? ClassKey
+  : StylesOrClassKey extends StyleRules<any, 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>>;
@@ -76,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-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;
+}
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 ee0a8546b0914b..451f0c96663275 100644
--- a/packages/material-ui/src/styles/withStyles.d.ts
+++ b/packages/material-ui/src/styles/withStyles.d.ts
@@ -1,55 +1,48 @@
-import * as React from 'react';
-import { CSSProperties, WithStylesOptions } from '@material-ui/styles/withStyles';
 import { PropInjector } from '@material-ui/types';
 import { Theme } from './createMuiTheme';
-
-export { CSSProperties, WithStylesOptions };
+import {
+  CreateCSSProperties,
+  CSSProperties,
+  ClassNameMap,
+  StyledComponentProps,
+  WithStylesOptions,
+  StyleRules as ActualStyleRules,
+  StyleRulesCallback,
+  Styles,
+  ClassKeyOfStyles,
+} from '@material-ui/styles/withStyles';
+
+export {
+  CreateCSSProperties,
+  CSSProperties,
+  ClassNameMap,
+  StyledComponentProps,
+  Styles,
+  WithStylesOptions,
+  StyleRulesCallback,
+};
 
 /**
- * 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`).
+ * Adapter for `StyleRules` from `@material-ui/styles` for backwards compatibility.
+ * Order of generic arguments is just reversed.
  */
-export type StyleRules<ClassKey extends string = string> = Record<ClassKey, CSSProperties>;
-
-export type StyleRulesCallback<ClassKey extends string = string> = (
-  theme: Theme,
-) => StyleRules<ClassKey>;
-
-export interface StylesCreator {
-  create(theme: Theme, name: string): StyleRules;
-  options: { index: number };
-  themingEnabled: boolean;
-}
-
-export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
+export type StyleRules<
+  ClassKey extends string = string,
+  Props extends object = {}
+> = ActualStyleRules<Props, ClassKey>;
 
 export type WithStyles<
-  T extends string | StyleRules | StyleRulesCallback = string,
+  StylesOrClassKey extends string | Styles<any, any, any> = 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<StylesOrClassKey>>;
 };
 
-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<Theme> = {}
+  Options extends WithStylesOptions<Theme> = {},
+  Props extends object = {}
 >(
-  style: StyleRulesCallback<ClassKey> | StyleRules<ClassKey>,
+  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 c1b71714d7122f..0585739b6dad16 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',
       },
@@ -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,
   });
 }
@@ -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),
+      }),
+    }));
+  }
+}