diff --git a/docs/src/pages/components/click-away-listener/ClickAway.js b/docs/src/pages/components/click-away-listener/ClickAway.js
index 23fdf1c85c4fe0..4db72e123faae1 100644
--- a/docs/src/pages/components/click-away-listener/ClickAway.js
+++ b/docs/src/pages/components/click-away-listener/ClickAway.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 ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import { grey } from '@material-ui/core/colors';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     position: 'relative',
   },
@@ -25,53 +24,38 @@ const styles = theme => ({
       marginRight: theme.spacing(3),
     },
   },
-});
+}));
 
-class ClickAway extends React.Component {
-  state = {
-    open: false,
-  };
+export default function ClickAway() {
+  const [open, setOpen] = React.useState(false);
+  const classes = useStyles();
 
-  handleClick = () => {
-    this.setState(state => ({
-      open: !state.open,
-    }));
+  const handleClick = () => {
+    setOpen(prev => !prev);
   };
 
-  handleClickAway = () => {
-    this.setState({
-      open: false,
-    });
+  const handleClickAway = () => {
+    setOpen(false);
   };
 
-  render() {
-    const { classes } = this.props;
-    const { open } = this.state;
-    const fake = <div className={classes.fake} />;
-
-    return (
-      <div className={classes.root}>
-        <ClickAwayListener onClickAway={this.handleClickAway}>
-          <div>
-            <Button onClick={this.handleClick}>Open menu</Button>
-            {open ? (
-              <Paper className={classes.paper}>
-                {fake}
-                {fake}
-                {fake}
-                {fake}
-                {fake}
-              </Paper>
-            ) : null}
-          </div>
-        </ClickAwayListener>
-      </div>
-    );
-  }
+  const fake = <div className={classes.fake} />;
+
+  return (
+    <div className={classes.root}>
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <div>
+          <Button onClick={handleClick}>Open menu</Button>
+          {open ? (
+            <Paper className={classes.paper}>
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+            </Paper>
+          ) : null}
+        </div>
+      </ClickAwayListener>
+    </div>
+  );
 }
-
-ClickAway.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(ClickAway);
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.tsx b/docs/src/pages/components/click-away-listener/ClickAway.tsx
new file mode 100644
index 00000000000000..f310fdea759a2c
--- /dev/null
+++ b/docs/src/pages/components/click-away-listener/ClickAway.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+import { grey } from '@material-ui/core/colors';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      position: 'relative',
+    },
+    paper: {
+      position: 'absolute',
+      top: 36,
+      right: 0,
+      left: 0,
+    },
+    fake: {
+      backgroundColor: grey[200],
+      height: theme.spacing(1),
+      margin: theme.spacing(2),
+      // Selects every two elements among any group of siblings.
+      '&:nth-child(2n)': {
+        marginRight: theme.spacing(3),
+      },
+    },
+  }),
+);
+
+export default function ClickAway() {
+  const [open, setOpen] = React.useState(false);
+  const classes = useStyles();
+
+  const handleClick = () => {
+    setOpen(prev => !prev);
+  };
+
+  const handleClickAway = () => {
+    setOpen(false);
+  };
+
+  const fake = <div className={classes.fake} />;
+
+  return (
+    <div className={classes.root}>
+      <ClickAwayListener onClickAway={handleClickAway}>
+        <div>
+          <Button onClick={handleClick}>Open menu</Button>
+          {open ? (
+            <Paper className={classes.paper}>
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+              {fake}
+            </Paper>
+          ) : null}
+        </div>
+      </ClickAwayListener>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/container/FixedContainer.js b/docs/src/pages/components/container/FixedContainer.js
index 9c22ba42d954e2..4aeda75ba0d03b 100644
--- a/docs/src/pages/components/container/FixedContainer.js
+++ b/docs/src/pages/components/container/FixedContainer.js
@@ -3,7 +3,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 
-function FixedContainer() {
+export default function FixedContainer() {
   return (
     <React.Fragment>
       <CssBaseline />
@@ -13,5 +13,3 @@ function FixedContainer() {
     </React.Fragment>
   );
 }
-
-export default FixedContainer;
diff --git a/docs/src/pages/components/container/FixedContainer.tsx b/docs/src/pages/components/container/FixedContainer.tsx
new file mode 100644
index 00000000000000..4aeda75ba0d03b
--- /dev/null
+++ b/docs/src/pages/components/container/FixedContainer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+
+export default function FixedContainer() {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Container fixed>
+        <Typography component="div" style={{ backgroundColor: '#cfe8fc', height: '100vh' }} />
+      </Container>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/pages/components/container/SimpleContainer.js b/docs/src/pages/components/container/SimpleContainer.js
index 89cf16bf0bf5f7..dea58d8e902ac1 100644
--- a/docs/src/pages/components/container/SimpleContainer.js
+++ b/docs/src/pages/components/container/SimpleContainer.js
@@ -3,7 +3,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 
-function SimpleContainer() {
+export default function SimpleContainer() {
   return (
     <React.Fragment>
       <CssBaseline />
@@ -13,5 +13,3 @@ function SimpleContainer() {
     </React.Fragment>
   );
 }
-
-export default SimpleContainer;
diff --git a/docs/src/pages/components/container/SimpleContainer.tsx b/docs/src/pages/components/container/SimpleContainer.tsx
new file mode 100644
index 00000000000000..dea58d8e902ac1
--- /dev/null
+++ b/docs/src/pages/components/container/SimpleContainer.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
+
+export default function SimpleContainer() {
+  return (
+    <React.Fragment>
+      <CssBaseline />
+      <Container maxWidth="sm">
+        <Typography component="div" style={{ backgroundColor: '#cfe8fc', height: '100vh' }} />
+      </Container>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/pages/components/popover/MouseOverPopover.js b/docs/src/pages/components/popover/MouseOverPopover.js
index 6e02fd098f655d..7d440d8b595c54 100644
--- a/docs/src/pages/components/popover/MouseOverPopover.js
+++ b/docs/src/pages/components/popover/MouseOverPopover.js
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function MouseOverPopover() {
+export default function MouseOverPopover() {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -60,5 +60,3 @@ function MouseOverPopover() {
     </div>
   );
 }
-
-export default MouseOverPopover;
diff --git a/docs/src/pages/components/popover/MouseOverPopover.tsx b/docs/src/pages/components/popover/MouseOverPopover.tsx
new file mode 100644
index 00000000000000..1ea427d3a4d973
--- /dev/null
+++ b/docs/src/pages/components/popover/MouseOverPopover.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    popover: {
+      pointerEvents: 'none',
+    },
+    paper: {
+      padding: theme.spacing(1),
+    },
+  }),
+);
+
+export default function MouseOverPopover() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+
+  function handlePopoverOpen(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handlePopoverClose() {
+    setAnchorEl(null);
+  }
+
+  const open = Boolean(anchorEl);
+
+  return (
+    <div>
+      <Typography
+        aria-owns={open ? 'mouse-over-popover' : undefined}
+        aria-haspopup="true"
+        onMouseEnter={handlePopoverOpen}
+        onMouseLeave={handlePopoverClose}
+      >
+        Hover with a Popover.
+      </Typography>
+      <Popover
+        id="mouse-over-popover"
+        className={classes.popover}
+        classes={{
+          paper: classes.paper,
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+      >
+        <Typography>I use Popover.</Typography>
+      </Popover>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js
index 23f8a958467947..9017ebfeae3f46 100644
--- a/docs/src/pages/components/popover/PopoverPopupState.js
+++ b/docs/src/pages/components/popover/PopoverPopupState.js
@@ -1,19 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   typography: {
     margin: theme.spacing(2),
   },
-});
+}));
 
-function PopoverPopupState(props) {
-  const { classes } = props;
+export default function PopoverPopupState() {
+  const classes = useStyles();
 
   return (
     <PopupState variant="popover" popupId="demo-popup-popover">
@@ -40,9 +39,3 @@ function PopoverPopupState(props) {
     </PopupState>
   );
 }
-
-PopoverPopupState.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(PopoverPopupState);
diff --git a/docs/src/pages/components/popover/SimplePopover.js b/docs/src/pages/components/popover/SimplePopover.js
index 459d16db167f40..5e21df890126a9 100644
--- a/docs/src/pages/components/popover/SimplePopover.js
+++ b/docs/src/pages/components/popover/SimplePopover.js
@@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function SimplePopover() {
+export default function SimplePopover() {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -23,7 +23,7 @@ function SimplePopover() {
   }
 
   const open = Boolean(anchorEl);
-  const id = open ? 'simple-popover' : null;
+  const id = open ? 'simple-popover' : undefined;
 
   return (
     <div>
@@ -49,5 +49,3 @@ function SimplePopover() {
     </div>
   );
 }
-
-export default SimplePopover;
diff --git a/docs/src/pages/components/popover/SimplePopover.tsx b/docs/src/pages/components/popover/SimplePopover.tsx
new file mode 100644
index 00000000000000..4158676d6a2da0
--- /dev/null
+++ b/docs/src/pages/components/popover/SimplePopover.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    typography: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function SimplePopover() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+
+  function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <div>
+      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+        Open Popover
+      </Button>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'center',
+        }}
+      >
+        <Typography className={classes.typography}>The content of the Popover.</Typography>
+      </Popover>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/FakedReferencePopper.js b/docs/src/pages/components/popper/FakedReferencePopper.js
index 46f78579d7cf4b..5378ccf0bbafe5 100644
--- a/docs/src/pages/components/popper/FakedReferencePopper.js
+++ b/docs/src/pages/components/popper/FakedReferencePopper.js
@@ -1,84 +1,66 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import Typography from '@material-ui/core/Typography';
 import Fade from '@material-ui/core/Fade';
 import Paper from '@material-ui/core/Paper';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   typography: {
     padding: theme.spacing(2),
   },
-});
+}));
 
-class FakedReferencePopper extends React.Component {
-  state = {
-    anchorEl: null,
-    open: false,
+export default function FakedReferencePopper() {
+  const [open, setOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const classes = useStyles();
+
+  const handleClose = () => {
+    setOpen(false);
   };
 
-  handleMouseUp = () => {
+  const handleMouseUp = () => {
     const selection = window.getSelection();
 
     // Resets when the selection has a length of 0
     if (!selection || selection.anchorOffset === selection.focusOffset) {
-      this.handleClose();
+      handleClose();
       return;
     }
 
     const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect();
 
-    this.setState({
-      open: true,
-      anchorEl: {
-        clientWidth: getBoundingClientRect().width,
-        clientHeight: getBoundingClientRect().height,
-        getBoundingClientRect,
-      },
+    setOpen(true);
+    setAnchorEl({
+      clientWidth: getBoundingClientRect().width,
+      clientHeight: getBoundingClientRect().height,
+      getBoundingClientRect,
     });
   };
 
-  handleClose = () => {
-    if (!this.state.open) {
-      return;
-    }
-
-    this.setState({ open: false });
-  };
-
-  render() {
-    const { classes } = this.props;
-    const { anchorEl, open } = this.state;
-    const id = open ? 'faked-reference-popper' : null;
+  const id = open ? 'faked-reference-popper' : undefined;
 
-    return (
-      <div onMouseLeave={this.handleClose}>
-        <Typography aria-describedby={id} onMouseUp={this.handleMouseUp}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
-          amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
-          finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
-          ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
-          finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
-          facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
-          lacinia tellus a libero volutpat maximus.
-        </Typography>
-        <Popper id={id} open={open} anchorEl={anchorEl} transition placement="bottom-start">
-          {({ TransitionProps }) => (
-            <Fade {...TransitionProps} timeout={350}>
-              <Paper>
-                <Typography className={classes.typography}>The content of the Popper.</Typography>
-              </Paper>
-            </Fade>
-          )}
-        </Popper>
-      </div>
-    );
-  }
+  return (
+    <div onMouseLeave={handleClose}>
+      <Typography aria-describedby={id} onMouseUp={handleMouseUp}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
+        amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
+        finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
+        ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
+        finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
+        facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
+        lacinia tellus a libero volutpat maximus.
+      </Typography>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition placement="bottom-start">
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper>
+              <Typography className={classes.typography}>The content of the Popper.</Typography>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
 }
-
-FakedReferencePopper.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(FakedReferencePopper);
diff --git a/docs/src/pages/components/popper/FakedReferencePopper.tsx b/docs/src/pages/components/popper/FakedReferencePopper.tsx
new file mode 100644
index 00000000000000..19d92e54d623eb
--- /dev/null
+++ b/docs/src/pages/components/popper/FakedReferencePopper.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Popper, { PopperProps } from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+import Fade from '@material-ui/core/Fade';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    typography: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function FakedReferencePopper() {
+  const [open, setOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState<PopperProps['anchorEl']>(null);
+  const classes = useStyles();
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleMouseUp = () => {
+    const selection = window.getSelection();
+
+    // Resets when the selection has a length of 0
+    if (!selection || selection.anchorOffset === selection.focusOffset) {
+      handleClose();
+      return;
+    }
+
+    const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect();
+
+    setOpen(true);
+    setAnchorEl({
+      clientWidth: getBoundingClientRect().width,
+      clientHeight: getBoundingClientRect().height,
+      getBoundingClientRect,
+    });
+  };
+
+  const id = open ? 'faked-reference-popper' : undefined;
+
+  return (
+    <div onMouseLeave={handleClose}>
+      <Typography aria-describedby={id} onMouseUp={handleMouseUp}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
+        amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
+        finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
+        ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
+        finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
+        facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
+        lacinia tellus a libero volutpat maximus.
+      </Typography>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition placement="bottom-start">
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper>
+              <Typography className={classes.typography}>The content of the Popper.</Typography>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/MinimalPopper.js b/docs/src/pages/components/popper/MinimalPopper.js
index 347edbe1796c83..6cbf70b82ce6e9 100644
--- a/docs/src/pages/components/popper/MinimalPopper.js
+++ b/docs/src/pages/components/popper/MinimalPopper.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Popper from '@material-ui/core/Popper';
 
-function MinimalPopper() {
+export default function MinimalPopper() {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   function handleClick(event) {
@@ -9,7 +9,7 @@ function MinimalPopper() {
   }
 
   const open = Boolean(anchorEl);
-  const id = open ? 'simple-popper' : null;
+  const id = open ? 'simple-popper' : undefined;
 
   return (
     <div>
@@ -22,5 +22,3 @@ function MinimalPopper() {
     </div>
   );
 }
-
-export default MinimalPopper;
diff --git a/docs/src/pages/components/popper/MinimalPopper.tsx b/docs/src/pages/components/popper/MinimalPopper.tsx
new file mode 100644
index 00000000000000..6675aa2452534b
--- /dev/null
+++ b/docs/src/pages/components/popper/MinimalPopper.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Popper from '@material-ui/core/Popper';
+
+export default function MinimalPopper() {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+
+  function handleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  }
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div>The content of the Popper.</div>
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/NoTransitionPopper.js b/docs/src/pages/components/popper/NoTransitionPopper.js
index def43f3a33858d..cdc6d5aa0e6771 100644
--- a/docs/src/pages/components/popper/NoTransitionPopper.js
+++ b/docs/src/pages/components/popper/NoTransitionPopper.js
@@ -1,52 +1,37 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   typography: {
     padding: theme.spacing(2),
   },
-});
+}));
 
-class NoTransitionPopper extends React.Component {
-  state = {
-    anchorEl: null,
-  };
+export default function NoTransitionPopper() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const classes = useStyles();
 
-  handleClick = event => {
-    const { currentTarget } = event;
-    this.setState(state => ({
-      anchorEl: state.anchorEl ? null : currentTarget,
-    }));
+  const handleClick = event => {
+    setAnchorEl(prev => (prev ? null : event.currentTarget));
   };
 
-  render() {
-    const { classes } = this.props;
-    const { anchorEl } = this.state;
-    const open = Boolean(anchorEl);
-    const id = open ? 'no-transition-popper' : null;
+  const open = Boolean(anchorEl);
+  const id = open ? 'no-transition-popper' : undefined;
 
-    return (
-      <div>
-        <Button aria-describedby={id} variant="contained" onClick={this.handleClick}>
-          Toggle Popper
-        </Button>
-        <Popper id={id} open={open} anchorEl={anchorEl}>
-          <Paper>
-            <Typography className={classes.typography}>The content of the Popper.</Typography>
-          </Paper>
-        </Popper>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+        Toggle Popper
+      </Button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <Paper>
+          <Typography className={classes.typography}>The content of the Popper.</Typography>
+        </Paper>
+      </Popper>
+    </div>
+  );
 }
-
-NoTransitionPopper.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(NoTransitionPopper);
diff --git a/docs/src/pages/components/popper/NoTransitionPopper.tsx b/docs/src/pages/components/popper/NoTransitionPopper.tsx
new file mode 100644
index 00000000000000..3a8a21cc117ab4
--- /dev/null
+++ b/docs/src/pages/components/popper/NoTransitionPopper.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    typography: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function NoTransitionPopper() {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const classes = useStyles();
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setAnchorEl(prev => (prev ? null : event.currentTarget));
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'no-transition-popper' : undefined;
+
+  return (
+    <div>
+      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+        Toggle Popper
+      </Button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <Paper>
+          <Typography className={classes.typography}>The content of the Popper.</Typography>
+        </Paper>
+      </Popper>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/popper/PopperPopupState.js b/docs/src/pages/components/popper/PopperPopupState.js
index baf5cc049eda26..5d44f0b1a70c3a 100644
--- a/docs/src/pages/components/popper/PopperPopupState.js
+++ b/docs/src/pages/components/popper/PopperPopupState.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Popper from '@material-ui/core/Popper';
@@ -8,14 +7,14 @@ import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state';
 import Fade from '@material-ui/core/Fade';
 import Paper from '@material-ui/core/Paper';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   typography: {
     padding: theme.spacing(2),
   },
-});
+}));
 
-function PopperPopupState(props) {
-  const { classes } = props;
+export default function PopperPopupState() {
+  const classes = useStyles();
 
   return (
     <PopupState variant="popper" popupId="demo-popup-popper">
@@ -38,9 +37,3 @@ function PopperPopupState(props) {
     </PopupState>
   );
 }
-
-PopperPopupState.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(PopperPopupState);
diff --git a/docs/src/pages/components/popper/PositionedPopper.js b/docs/src/pages/components/popper/PositionedPopper.js
index fb2c5a6bc6b55d..51f11095d3ca2f 100644
--- a/docs/src/pages/components/popper/PositionedPopper.js
+++ b/docs/src/pages/components/popper/PositionedPopper.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
@@ -8,87 +7,72 @@ import Button from '@material-ui/core/Button';
 import Fade from '@material-ui/core/Fade';
 import Paper from '@material-ui/core/Paper';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
   root: {
     width: 500,
   },
   typography: {
     padding: theme.spacing(2),
   },
-});
+}));
 
-class PositionedPopper extends React.Component {
-  state = {
-    anchorEl: null,
-    open: false,
-    placement: null,
-  };
+export default function PositionedPopper() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const [placement, setPlacement] = React.useState();
+  const classes = useStyles();
 
-  handleClick = placement => event => {
-    const { currentTarget } = event;
-    this.setState(state => ({
-      anchorEl: currentTarget,
-      open: state.placement !== placement || !state.open,
-      placement,
-    }));
+  const handleClick = newPlacement => event => {
+    setAnchorEl(event.currentTarget);
+    setOpen(prev => placement !== newPlacement || !prev);
+    setPlacement(newPlacement);
   };
 
-  render() {
-    const { classes } = this.props;
-    const { anchorEl, open, placement } = this.state;
-
-    return (
-      <div className={classes.root}>
-        <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
-          {({ TransitionProps }) => (
-            <Fade {...TransitionProps} timeout={350}>
-              <Paper>
-                <Typography className={classes.typography}>The content of the Popper.</Typography>
-              </Paper>
-            </Fade>
-          )}
-        </Popper>
-        <Grid container justify="center">
-          <Grid item>
-            <Button onClick={this.handleClick('top-start')}>top-start</Button>
-            <Button onClick={this.handleClick('top')}>top</Button>
-            <Button onClick={this.handleClick('top-end')}>top-end</Button>
-          </Grid>
+  return (
+    <div className={classes.root}>
+      <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper>
+              <Typography className={classes.typography}>The content of the Popper.</Typography>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+      <Grid container justify="center">
+        <Grid item>
+          <Button onClick={handleClick('top-start')}>top-start</Button>
+          <Button onClick={handleClick('top')}>top</Button>
+          <Button onClick={handleClick('top-end')}>top-end</Button>
+        </Grid>
+      </Grid>
+      <Grid container justify="center">
+        <Grid item xs={6}>
+          <Button onClick={handleClick('left-start')}>left-start</Button>
+          <br />
+          <Button onClick={handleClick('left')}>left</Button>
+          <br />
+          <Button onClick={handleClick('left-end')}>left-end</Button>
         </Grid>
-        <Grid container justify="center">
-          <Grid item xs={6}>
-            <Button onClick={this.handleClick('left-start')}>left-start</Button>
-            <br />
-            <Button onClick={this.handleClick('left')}>left</Button>
-            <br />
-            <Button onClick={this.handleClick('left-end')}>left-end</Button>
+        <Grid item container xs={6} alignItems="flex-end" direction="column">
+          <Grid item>
+            <Button onClick={handleClick('right-start')}>right-start</Button>
           </Grid>
-          <Grid item container xs={6} alignItems="flex-end" direction="column">
-            <Grid item>
-              <Button onClick={this.handleClick('right-start')}>right-start</Button>
-            </Grid>
-            <Grid item>
-              <Button onClick={this.handleClick('right')}>right</Button>
-            </Grid>
-            <Grid item>
-              <Button onClick={this.handleClick('right-end')}>right-end</Button>
-            </Grid>
+          <Grid item>
+            <Button onClick={handleClick('right')}>right</Button>
           </Grid>
-        </Grid>
-        <Grid container justify="center">
           <Grid item>
-            <Button onClick={this.handleClick('bottom-start')}>bottom-start</Button>
-            <Button onClick={this.handleClick('bottom')}>bottom</Button>
-            <Button onClick={this.handleClick('bottom-end')}>bottom-end</Button>
+            <Button onClick={handleClick('right-end')}>right-end</Button>
           </Grid>
         </Grid>
-      </div>
-    );
-  }
+      </Grid>
+      <Grid container justify="center">
+        <Grid item>
+          <Button onClick={handleClick('bottom-start')}>bottom-start</Button>
+          <Button onClick={handleClick('bottom')}>bottom</Button>
+          <Button onClick={handleClick('bottom-end')}>bottom-end</Button>
+        </Grid>
+      </Grid>
+    </div>
+  );
 }
-
-PositionedPopper.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(PositionedPopper);
diff --git a/docs/src/pages/components/popper/PositionedPopper.tsx b/docs/src/pages/components/popper/PositionedPopper.tsx
new file mode 100644
index 00000000000000..7c5c4b9e41fc5c
--- /dev/null
+++ b/docs/src/pages/components/popper/PositionedPopper.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Popper, { PopperPlacementType } from '@material-ui/core/Popper';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import Button from '@material-ui/core/Button';
+import Fade from '@material-ui/core/Fade';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 500,
+    },
+    typography: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+export default function PositionedPopper() {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const [open, setOpen] = React.useState(false);
+  const [placement, setPlacement] = React.useState<PopperPlacementType>();
+  const classes = useStyles();
+
+  const handleClick = (newPlacement: PopperPlacementType) => (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(prev => placement !== newPlacement || !prev);
+    setPlacement(newPlacement);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Popper open={open} anchorEl={anchorEl} placement={placement} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <Paper>
+              <Typography className={classes.typography}>The content of the Popper.</Typography>
+            </Paper>
+          </Fade>
+        )}
+      </Popper>
+      <Grid container justify="center">
+        <Grid item>
+          <Button onClick={handleClick('top-start')}>top-start</Button>
+          <Button onClick={handleClick('top')}>top</Button>
+          <Button onClick={handleClick('top-end')}>top-end</Button>
+        </Grid>
+      </Grid>
+      <Grid container justify="center">
+        <Grid item xs={6}>
+          <Button onClick={handleClick('left-start')}>left-start</Button>
+          <br />
+          <Button onClick={handleClick('left')}>left</Button>
+          <br />
+          <Button onClick={handleClick('left-end')}>left-end</Button>
+        </Grid>
+        <Grid item container xs={6} alignItems="flex-end" direction="column">
+          <Grid item>
+            <Button onClick={handleClick('right-start')}>right-start</Button>
+          </Grid>
+          <Grid item>
+            <Button onClick={handleClick('right')}>right</Button>
+          </Grid>
+          <Grid item>
+            <Button onClick={handleClick('right-end')}>right-end</Button>
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid container justify="center">
+        <Grid item>
+          <Button onClick={handleClick('bottom-start')}>bottom-start</Button>
+          <Button onClick={handleClick('bottom')}>bottom</Button>
+          <Button onClick={handleClick('bottom-end')}>bottom-end</Button>
+        </Grid>
+      </Grid>
+    </div>
+  );
+}