From ecb08974390c93f1bda9320d1b360610ac269082 Mon Sep 17 00:00:00 2001
From: Kristoffer K <merceyz@users.noreply.github.com>
Date: Mon, 3 Jun 2019 19:31:47 +0200
Subject: [PATCH] [docs] Migrate batch of demos to hooks/typescript (#16003)

* [docs] Migrate components/typography/TypographyTheme

* [docs] Migrate components/transitions

* [docs] Migrate components/links

* Migrate some demos in customization/components

* use immediate export

* Move Polygon out of function

* use immediate exports
---
 .../pages/components/app-bar/BottomAppBar.js  |  4 +-
 .../pages/components/app-bar/BottomAppBar.tsx |  4 +-
 .../src/pages/components/links/ButtonLink.tsx | 18 ++++
 docs/src/pages/components/links/Links.js      | 17 ++--
 docs/src/pages/components/links/Links.tsx     | 34 ++++++++
 .../components/transitions/SimpleCollapse.js  | 77 +++++++----------
 .../components/transitions/SimpleCollapse.tsx | 63 ++++++++++++++
 .../components/transitions/SimpleFade.js      | 63 ++++++--------
 .../components/transitions/SimpleFade.tsx     | 56 ++++++++++++
 .../components/transitions/SimpleGrow.js      | 85 +++++++++----------
 .../components/transitions/SimpleGrow.tsx     | 74 ++++++++++++++++
 .../components/transitions/SimpleSlide.js     | 63 ++++++--------
 .../components/transitions/SimpleSlide.tsx    | 58 +++++++++++++
 .../components/transitions/SimpleZoom.js      | 77 +++++++----------
 .../components/transitions/SimpleZoom.tsx     | 65 ++++++++++++++
 .../components/typography/TypographyTheme.js  | 19 ++---
 .../components/typography/TypographyTheme.tsx | 18 ++++
 .../components/ClassesNesting.js              | 17 ++--
 .../components/ClassesNesting.tsx             | 35 ++++++++
 .../components/ClassesShorthand.tsx           | 24 ++++++
 .../customization/components/ClassesState.js  | 18 ++--
 .../customization/components/ClassesState.tsx | 42 +++++++++
 22 files changed, 667 insertions(+), 264 deletions(-)
 create mode 100644 docs/src/pages/components/links/ButtonLink.tsx
 create mode 100644 docs/src/pages/components/links/Links.tsx
 create mode 100644 docs/src/pages/components/transitions/SimpleCollapse.tsx
 create mode 100644 docs/src/pages/components/transitions/SimpleFade.tsx
 create mode 100644 docs/src/pages/components/transitions/SimpleGrow.tsx
 create mode 100644 docs/src/pages/components/transitions/SimpleSlide.tsx
 create mode 100644 docs/src/pages/components/transitions/SimpleZoom.tsx
 create mode 100644 docs/src/pages/components/typography/TypographyTheme.tsx
 create mode 100644 docs/src/pages/customization/components/ClassesNesting.tsx
 create mode 100644 docs/src/pages/customization/components/ClassesShorthand.tsx
 create mode 100644 docs/src/pages/customization/components/ClassesState.tsx

diff --git a/docs/src/pages/components/app-bar/BottomAppBar.js b/docs/src/pages/components/app-bar/BottomAppBar.js
index 7373d7b1fae8ab..1c9e7cbd74656c 100644
--- a/docs/src/pages/components/app-bar/BottomAppBar.js
+++ b/docs/src/pages/components/app-bar/BottomAppBar.js
@@ -97,7 +97,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function BottomAppBar() {
+export default function BottomAppBar() {
   const classes = useStyles();
 
   return (
@@ -142,5 +142,3 @@ function BottomAppBar() {
     </React.Fragment>
   );
 }
-
-export default BottomAppBar;
diff --git a/docs/src/pages/components/app-bar/BottomAppBar.tsx b/docs/src/pages/components/app-bar/BottomAppBar.tsx
index ee415097f64fba..0111887e42aaf6 100644
--- a/docs/src/pages/components/app-bar/BottomAppBar.tsx
+++ b/docs/src/pages/components/app-bar/BottomAppBar.tsx
@@ -99,7 +99,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-function BottomAppBar() {
+export default function BottomAppBar() {
   const classes = useStyles();
 
   return (
@@ -144,5 +144,3 @@ function BottomAppBar() {
     </React.Fragment>
   );
 }
-
-export default BottomAppBar;
diff --git a/docs/src/pages/components/links/ButtonLink.tsx b/docs/src/pages/components/links/ButtonLink.tsx
new file mode 100644
index 00000000000000..29b57d98104d55
--- /dev/null
+++ b/docs/src/pages/components/links/ButtonLink.tsx
@@ -0,0 +1,18 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React from 'react';
+import Link from '@material-ui/core/Link';
+
+export default function ButtonLink() {
+  return (
+    <Link
+      component="button"
+      variant="body2"
+      onClick={() => {
+        alert("I'm a button.");
+      }}
+    >
+      Button Link
+    </Link>
+  );
+}
diff --git a/docs/src/pages/components/links/Links.js b/docs/src/pages/components/links/Links.js
index cb515a21b4aab2..8a4a1d4a93b193 100644
--- a/docs/src/pages/components/links/Links.js
+++ b/docs/src/pages/components/links/Links.js
@@ -1,21 +1,20 @@
 /* eslint-disable no-script-url */
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   link: {
     margin: theme.spacing(1),
   },
-});
+}));
 
 // This resolves to nothing and doesn't affect browser history
 const dudUrl = 'javascript:;';
 
-function Links(props) {
-  const { classes } = props;
+export default function Links() {
+  const classes = useStyles();
 
   return (
     <Typography>
@@ -31,9 +30,3 @@ function Links(props) {
     </Typography>
   );
 }
-
-Links.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(Links);
diff --git a/docs/src/pages/components/links/Links.tsx b/docs/src/pages/components/links/Links.tsx
new file mode 100644
index 00000000000000..720e97b1b95d11
--- /dev/null
+++ b/docs/src/pages/components/links/Links.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable no-script-url */
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      margin: theme.spacing(1),
+    },
+  }),
+);
+
+// This resolves to nothing and doesn't affect browser history
+const dudUrl = 'javascript:;';
+
+export default function Links() {
+  const classes = useStyles();
+
+  return (
+    <Typography>
+      <Link href={dudUrl} className={classes.link}>
+        Link
+      </Link>
+      <Link href={dudUrl} color="inherit" className={classes.link}>
+        {'color="inherit"'}
+      </Link>
+      <Link href={dudUrl} variant="body2" className={classes.link}>
+        {'variant="body2"'}
+      </Link>
+    </Typography>
+  );
+}
diff --git a/docs/src/pages/components/transitions/SimpleCollapse.js b/docs/src/pages/components/transitions/SimpleCollapse.js
index 0aa197aa6fabb4..58de3324c5e6f5 100644
--- a/docs/src/pages/components/transitions/SimpleCollapse.js
+++ b/docs/src/pages/components/transitions/SimpleCollapse.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Collapse from '@material-ui/core/Collapse';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: 180,
   },
@@ -25,50 +24,38 @@ const styles = theme => ({
     stroke: theme.palette.divider,
     strokeWidth: 1,
   },
-});
+}));
 
-class SimpleCollapse extends React.Component {
-  state = {
-    checked: false,
-  };
+export default function SimpleCollapse() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
 
-  handleChange = () => {
-    this.setState(state => ({ checked: !state.checked }));
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { checked } = this.state;
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
 
-    return (
-      <div className={classes.root}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={this.handleChange} />}
-          label="Show"
-        />
-        <div className={classes.container}>
-          <Collapse in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Collapse>
-          <Collapse in={checked} collapsedHeight="40px">
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Collapse>
-        </div>
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Collapse in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
+        <Collapse in={checked} collapsedHeight="40px">
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-SimpleCollapse.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleCollapse);
diff --git a/docs/src/pages/components/transitions/SimpleCollapse.tsx b/docs/src/pages/components/transitions/SimpleCollapse.tsx
new file mode 100644
index 00000000000000..93479c6d037490
--- /dev/null
+++ b/docs/src/pages/components/transitions/SimpleCollapse.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Collapse from '@material-ui/core/Collapse';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: 180,
+    },
+    container: {
+      display: 'flex',
+    },
+    paper: {
+      margin: theme.spacing(1),
+    },
+    svg: {
+      width: 100,
+      height: 100,
+    },
+    polygon: {
+      fill: theme.palette.common.white,
+      stroke: theme.palette.divider,
+      strokeWidth: 1,
+    },
+  }),
+);
+
+export default function SimpleCollapse() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
+
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Collapse in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
+        <Collapse in={checked} collapsedHeight="40px">
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Collapse>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/transitions/SimpleFade.js b/docs/src/pages/components/transitions/SimpleFade.js
index e7ed6784ecee95..05f843ade21d4f 100644
--- a/docs/src/pages/components/transitions/SimpleFade.js
+++ b/docs/src/pages/components/transitions/SimpleFade.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Fade from '@material-ui/core/Fade';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: 180,
   },
@@ -25,43 +24,31 @@ const styles = theme => ({
     stroke: theme.palette.divider,
     strokeWidth: 1,
   },
-});
+}));
 
-class SimpleFade extends React.Component {
-  state = {
-    checked: false,
-  };
+export default function SimpleFade() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
 
-  handleChange = () => {
-    this.setState(state => ({ checked: !state.checked }));
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { checked } = this.state;
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
 
-    return (
-      <div className={classes.root}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={this.handleChange} />}
-          label="Show"
-        />
-        <div className={classes.container}>
-          <Fade in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Fade>
-        </div>
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Fade in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Fade>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-SimpleFade.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleFade);
diff --git a/docs/src/pages/components/transitions/SimpleFade.tsx b/docs/src/pages/components/transitions/SimpleFade.tsx
new file mode 100644
index 00000000000000..11fcda444b7488
--- /dev/null
+++ b/docs/src/pages/components/transitions/SimpleFade.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Fade from '@material-ui/core/Fade';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: 180,
+    },
+    container: {
+      display: 'flex',
+    },
+    paper: {
+      margin: theme.spacing(1),
+    },
+    svg: {
+      width: 100,
+      height: 100,
+    },
+    polygon: {
+      fill: theme.palette.common.white,
+      stroke: theme.palette.divider,
+      strokeWidth: 1,
+    },
+  }),
+);
+
+export default function SimpleFade() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
+
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Fade in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Fade>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/transitions/SimpleGrow.js b/docs/src/pages/components/transitions/SimpleGrow.js
index 27549a09e1c49c..d83b775403d8e3 100644
--- a/docs/src/pages/components/transitions/SimpleGrow.js
+++ b/docs/src/pages/components/transitions/SimpleGrow.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Grow from '@material-ui/core/Grow';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: 180,
   },
@@ -25,53 +24,49 @@ const styles = theme => ({
     stroke: theme.palette.divider,
     strokeWidth: 1,
   },
-});
+}));
 
-class SimpleGrow extends React.Component {
-  state = {
-    checked: false,
-  };
+function Polygon() {
+  const classes = useStyles();
 
-  handleChange = () => {
-    this.setState(state => ({ checked: !state.checked }));
-  };
+  return (
+    <Paper elevation={4} className={classes.paper}>
+      <svg className={classes.svg}>
+        <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+      </svg>
+    </Paper>
+  );
+}
 
-  render() {
-    const { classes } = this.props;
-    const { checked } = this.state;
+function SimpleGrow() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
 
-    const polygon = (
-      <Paper elevation={4} className={classes.paper}>
-        <svg className={classes.svg}>
-          <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-        </svg>
-      </Paper>
-    );
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
 
-    return (
-      <div className={classes.root}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={this.handleChange} />}
-          label="Show"
-        />
-        <div className={classes.container}>
-          <Grow in={checked}>{polygon}</Grow>
-          {/* Conditionally applies the timeout property to change the entry speed. */}
-          <Grow
-            in={checked}
-            style={{ transformOrigin: '0 0 0' }}
-            {...(checked ? { timeout: 1000 } : {})}
-          >
-            {polygon}
-          </Grow>
-        </div>
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Grow in={checked}>
+          <Polygon />
+        </Grow>
+        {/* Conditionally applies the timeout property to change the entry speed. */}
+        <Grow
+          in={checked}
+          style={{ transformOrigin: '0 0 0' }}
+          {...(checked ? { timeout: 1000 } : {})}
+        >
+          <Polygon />
+        </Grow>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-SimpleGrow.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleGrow);
+export default SimpleGrow;
diff --git a/docs/src/pages/components/transitions/SimpleGrow.tsx b/docs/src/pages/components/transitions/SimpleGrow.tsx
new file mode 100644
index 00000000000000..9915b28706516f
--- /dev/null
+++ b/docs/src/pages/components/transitions/SimpleGrow.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Grow from '@material-ui/core/Grow';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: 180,
+    },
+    container: {
+      display: 'flex',
+    },
+    paper: {
+      margin: theme.spacing(1),
+    },
+    svg: {
+      width: 100,
+      height: 100,
+    },
+    polygon: {
+      fill: theme.palette.common.white,
+      stroke: theme.palette.divider,
+      strokeWidth: 1,
+    },
+  }),
+);
+
+function Polygon() {
+  const classes = useStyles();
+
+  return (
+    <Paper elevation={4} className={classes.paper}>
+      <svg className={classes.svg}>
+        <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+      </svg>
+    </Paper>
+  );
+}
+
+function SimpleGrow() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
+
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Grow in={checked}>
+          <Polygon />
+        </Grow>
+        {/* Conditionally applies the timeout property to change the entry speed. */}
+        <Grow
+          in={checked}
+          style={{ transformOrigin: '0 0 0' }}
+          {...(checked ? { timeout: 1000 } : {})}
+        >
+          <Polygon />
+        </Grow>
+      </div>
+    </div>
+  );
+}
+
+export default SimpleGrow;
diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js
index 78edd7c640e463..fd89c7d9a0ff5e 100644
--- a/docs/src/pages/components/transitions/SimpleSlide.js
+++ b/docs/src/pages/components/transitions/SimpleSlide.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Slide from '@material-ui/core/Slide';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: 180,
   },
@@ -27,43 +26,31 @@ const styles = theme => ({
     stroke: theme.palette.divider,
     strokeWidth: 1,
   },
-});
+}));
 
-class SimpleSlide extends React.Component {
-  state = {
-    checked: false,
-  };
+export default function SimpleSlide() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
 
-  handleChange = () => {
-    this.setState(state => ({ checked: !state.checked }));
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { checked } = this.state;
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
 
-    return (
-      <div className={classes.root}>
-        <div className={classes.wrapper}>
-          <FormControlLabel
-            control={<Switch checked={checked} onChange={this.handleChange} />}
-            label="Show"
-          />
-          <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Slide>
-        </div>
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <FormControlLabel
+          control={<Switch checked={checked} onChange={handleChange} />}
+          label="Show"
+        />
+        <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Slide>
       </div>
-    );
-  }
+    </div>
+  );
 }
-
-SimpleSlide.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleSlide);
diff --git a/docs/src/pages/components/transitions/SimpleSlide.tsx b/docs/src/pages/components/transitions/SimpleSlide.tsx
new file mode 100644
index 00000000000000..5ecc9c518d42c6
--- /dev/null
+++ b/docs/src/pages/components/transitions/SimpleSlide.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Slide from '@material-ui/core/Slide';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: 180,
+    },
+    wrapper: {
+      width: 100 + theme.spacing(2),
+    },
+    paper: {
+      zIndex: 1,
+      position: 'relative',
+      margin: theme.spacing(1),
+    },
+    svg: {
+      width: 100,
+      height: 100,
+    },
+    polygon: {
+      fill: theme.palette.common.white,
+      stroke: theme.palette.divider,
+      strokeWidth: 1,
+    },
+  }),
+);
+
+export default function SimpleSlide() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
+
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <FormControlLabel
+          control={<Switch checked={checked} onChange={handleChange} />}
+          label="Show"
+        />
+        <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Slide>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/transitions/SimpleZoom.js b/docs/src/pages/components/transitions/SimpleZoom.js
index 1490c73e0d2cdf..4b63bba19a92c8 100644
--- a/docs/src/pages/components/transitions/SimpleZoom.js
+++ b/docs/src/pages/components/transitions/SimpleZoom.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import Paper from '@material-ui/core/Paper';
 import Zoom from '@material-ui/core/Zoom';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     height: 180,
   },
@@ -25,50 +24,40 @@ const styles = theme => ({
     stroke: theme.palette.divider,
     strokeWidth: 1,
   },
-});
+}));
 
-class SimpleZoom extends React.Component {
-  state = {
-    checked: false,
-  };
+function SimpleZoom() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
 
-  handleChange = () => {
-    this.setState(state => ({ checked: !state.checked }));
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { checked } = this.state;
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
 
-    return (
-      <div className={classes.root}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={this.handleChange} />}
-          label="Show"
-        />
-        <div className={classes.container}>
-          <Zoom in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Zoom>
-          <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Zoom>
-        </div>
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Zoom in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Zoom>
+        <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Zoom>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
-SimpleZoom.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleZoom);
+export default SimpleZoom;
diff --git a/docs/src/pages/components/transitions/SimpleZoom.tsx b/docs/src/pages/components/transitions/SimpleZoom.tsx
new file mode 100644
index 00000000000000..3faf5f1c1539b2
--- /dev/null
+++ b/docs/src/pages/components/transitions/SimpleZoom.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+import Paper from '@material-ui/core/Paper';
+import Zoom from '@material-ui/core/Zoom';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      height: 180,
+    },
+    container: {
+      display: 'flex',
+    },
+    paper: {
+      margin: theme.spacing(1),
+    },
+    svg: {
+      width: 100,
+      height: 100,
+    },
+    polygon: {
+      fill: theme.palette.common.white,
+      stroke: theme.palette.divider,
+      strokeWidth: 1,
+    },
+  }),
+);
+
+function SimpleZoom() {
+  const classes = useStyles();
+  const [checked, setChecked] = React.useState(false);
+
+  function handleChange() {
+    setChecked(prev => !prev);
+  }
+
+  return (
+    <div className={classes.root}>
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <div className={classes.container}>
+        <Zoom in={checked}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Zoom>
+        <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
+          <Paper elevation={4} className={classes.paper}>
+            <svg className={classes.svg}>
+              <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+            </svg>
+          </Paper>
+        </Zoom>
+      </div>
+    </div>
+  );
+}
+
+export default SimpleZoom;
diff --git a/docs/src/pages/components/typography/TypographyTheme.js b/docs/src/pages/components/typography/TypographyTheme.js
index b19cd831d29501..9bfb9d827730b0 100644
--- a/docs/src/pages/components/typography/TypographyTheme.js
+++ b/docs/src/pages/components/typography/TypographyTheme.js
@@ -1,21 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     ...theme.typography.button,
     backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(1),
   },
-});
+}));
 
-function TypographyTheme(props) {
-  return <div className={props.classes.root}>{"This div's text looks like that of a button."}</div>;
-}
-
-TypographyTheme.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
+export default function TypographyTheme() {
+  const classes = useStyles();
 
-export default withStyles(styles)(TypographyTheme);
+  return <div className={classes.root}>{"This div's text looks like that of a button."}</div>;
+}
diff --git a/docs/src/pages/components/typography/TypographyTheme.tsx b/docs/src/pages/components/typography/TypographyTheme.tsx
new file mode 100644
index 00000000000000..f9d464c6e6f73c
--- /dev/null
+++ b/docs/src/pages/components/typography/TypographyTheme.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      ...theme.typography.button,
+      backgroundColor: theme.palette.background.paper,
+      padding: theme.spacing(1),
+    },
+  }),
+);
+
+export default function TypographyTheme() {
+  const classes = useStyles();
+
+  return <div className={classes.root}>{"This div's text looks like that of a button."}</div>;
+}
diff --git a/docs/src/pages/customization/components/ClassesNesting.js b/docs/src/pages/customization/components/ClassesNesting.js
index a8b9bbe416f825..4bd28301f0992e 100644
--- a/docs/src/pages/customization/components/ClassesNesting.js
+++ b/docs/src/pages/customization/components/ClassesNesting.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
-const styles = {
+const useStyles = makeStyles({
   root: {
     background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
     borderRadius: 3,
@@ -16,10 +15,10 @@ const styles = {
   label: {
     textTransform: 'capitalize',
   },
-};
+});
 
-function ClassesNesting(props) {
-  const { classes } = props;
+export default function ClassesNesting() {
+  const classes = useStyles();
 
   return (
     <Button
@@ -32,9 +31,3 @@ function ClassesNesting(props) {
     </Button>
   );
 }
-
-ClassesNesting.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(ClassesNesting);
diff --git a/docs/src/pages/customization/components/ClassesNesting.tsx b/docs/src/pages/customization/components/ClassesNesting.tsx
new file mode 100644
index 00000000000000..d35018ec6ab562
--- /dev/null
+++ b/docs/src/pages/customization/components/ClassesNesting.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles(
+  createStyles({
+    root: {
+      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+      borderRadius: 3,
+      border: 0,
+      color: 'white',
+      height: 48,
+      padding: '0 30px',
+      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+    },
+    label: {
+      textTransform: 'capitalize',
+    },
+  }),
+);
+
+export default function ClassesNesting() {
+  const classes = useStyles();
+
+  return (
+    <Button
+      classes={{
+        root: classes.root, // class name, e.g. `classes-nesting-root-x`
+        label: classes.label, // class name, e.g. `classes-nesting-label-x`
+      }}
+    >
+      classes nesting
+    </Button>
+  );
+}
diff --git a/docs/src/pages/customization/components/ClassesShorthand.tsx b/docs/src/pages/customization/components/ClassesShorthand.tsx
new file mode 100644
index 00000000000000..12a2451db0ef52
--- /dev/null
+++ b/docs/src/pages/customization/components/ClassesShorthand.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+// The `withStyles()` higher-order component is injecting a `classes`
+// property that is used by the `Button` component.
+const StyledButton = withStyles({
+  root: {
+    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+    borderRadius: 3,
+    border: 0,
+    color: 'white',
+    height: 48,
+    padding: '0 30px',
+    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+  },
+  label: {
+    textTransform: 'capitalize',
+  },
+})(Button);
+
+export default function ClassesShorthand() {
+  return <StyledButton>Classes Shorthand</StyledButton>;
+}
diff --git a/docs/src/pages/customization/components/ClassesState.js b/docs/src/pages/customization/components/ClassesState.js
index df7f1681cfeff0..345d178bd20990 100644
--- a/docs/src/pages/customization/components/ClassesState.js
+++ b/docs/src/pages/customization/components/ClassesState.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
-const styles = {
+const useStyles = makeStyles({
   root: {
     background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
     borderRadius: 3,
@@ -22,10 +21,11 @@ const styles = {
     },
   },
   disabled: {},
-};
+});
+
+export default function ClassesState() {
+  const classes = useStyles();
 
-function ClassesState(props) {
-  const { classes } = props;
   return (
     <Button
       disabled
@@ -38,9 +38,3 @@ function ClassesState(props) {
     </Button>
   );
 }
-
-ClassesState.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(ClassesState);
diff --git a/docs/src/pages/customization/components/ClassesState.tsx b/docs/src/pages/customization/components/ClassesState.tsx
new file mode 100644
index 00000000000000..84f152a188999b
--- /dev/null
+++ b/docs/src/pages/customization/components/ClassesState.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles(
+  createStyles({
+    root: {
+      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+      borderRadius: 3,
+      border: 0,
+      color: 'white',
+      height: 48,
+      padding: '0 30px',
+      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+      // $disabled is a reference to the local disabled
+      // rule within the same style sheet.
+      // By using &, we increase the specificity.
+      '&$disabled': {
+        background: 'rgba(0, 0, 0, 0.12)',
+        color: 'white',
+        boxShadow: 'none',
+      },
+    },
+    disabled: {},
+  }),
+);
+
+export default function ClassesState() {
+  const classes = useStyles();
+
+  return (
+    <Button
+      disabled
+      classes={{
+        root: classes.root, // class name, e.g. `root-x`
+        disabled: classes.disabled, // class name, e.g. `disabled-x`
+      }}
+    >
+      classes state
+    </Button>
+  );
+}