diff --git a/docs/src/pages/demos/badges/CustomizedBadge.js b/docs/src/pages/demos/badges/CustomizedBadge.js
index 48e9f0e848affa..942d572acf6f64 100644
--- a/docs/src/pages/demos/badges/CustomizedBadge.js
+++ b/docs/src/pages/demos/badges/CustomizedBadge.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
-import { makeStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/core/styles';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
-const useStyles = makeStyles(theme => ({
+const StyledBadge = withStyles(theme => ({
   badge: {
     top: '50%',
     right: -3,
@@ -13,16 +13,14 @@ const useStyles = makeStyles(theme => ({
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
     }`,
   },
-}));
+}))(Badge);
 
 function CustomizedBadge() {
-  const classes = useStyles();
-
   return (
     <IconButton aria-label="Cart">
-      <Badge badgeContent={4} color="primary" classes={{ badge: classes.badge }}>
+      <StyledBadge badgeContent={4} color="primary">
         <ShoppingCartIcon />
-      </Badge>
+      </StyledBadge>
     </IconButton>
   );
 }
diff --git a/docs/src/pages/demos/badges/CustomizedBadge.tsx b/docs/src/pages/demos/badges/CustomizedBadge.tsx
index 7afe1b1d2782de..b5bb60f74f80da 100644
--- a/docs/src/pages/demos/badges/CustomizedBadge.tsx
+++ b/docs/src/pages/demos/badges/CustomizedBadge.tsx
@@ -1,30 +1,26 @@
 import React from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import Badge from '@material-ui/core/Badge';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { withStyles, Theme } from '@material-ui/core/styles';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    badge: {
-      top: '50%',
-      right: -3,
-      // The border color match the background color.
-      border: `2px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
-      }`,
-    },
-  }),
-);
+const StyledBadge = withStyles((theme: Theme) => ({
+  badge: {
+    top: '50%',
+    right: -3,
+    // The border color match the background color.
+    border: `2px solid ${
+      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
+    }`,
+  },
+}))(Badge);
 
 function CustomizedBadge() {
-  const classes = useStyles();
-
   return (
     <IconButton aria-label="Cart">
-      <Badge badgeContent={4} color="primary" classes={{ badge: classes.badge }}>
+      <StyledBadge badgeContent={4} color="primary">
         <ShoppingCartIcon />
-      </Badge>
+      </StyledBadge>
     </IconButton>
   );
 }
diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js
index 8ee0a586039f9f..1967deae8e490a 100644
--- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js
+++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
 import { emphasize } from '@material-ui/core/styles/colorManipulator';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -9,11 +8,8 @@ import Avatar from '@material-ui/core/Avatar';
 import HomeIcon from '@material-ui/icons/Home';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-const styles = theme => ({
+const StyledBreadcrumb = withStyles(theme => ({
   root: {
-    padding: theme.spacing(1),
-  },
-  chip: {
     backgroundColor: theme.palette.grey[100],
     height: 24,
     color: theme.palette.grey[800],
@@ -26,30 +22,25 @@ const styles = theme => ({
       backgroundColor: emphasize(theme.palette.grey[300], 0.12),
     },
   },
-  avatar: {
-    background: 'none',
-    marginRight: -theme.spacing(1.5),
-  },
-});
+}))(Chip); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
 
 function handleClick(event) {
   event.preventDefault();
   alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
 }
 
-function CustomBreadcrumb(props) {
-  const { classes, ...rest } = props;
-  return <Chip className={classes.chip} {...rest} />;
-}
-
-CustomBreadcrumb.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
+const useStyles = makeStyles(theme => ({
+  root: {
+    padding: theme.spacing(1),
+  },
+  avatar: {
+    background: 'none',
+    marginRight: -theme.spacing(1.5),
+  },
+}));
 
-function CustomizedBreadcrumbs(props) {
-  const { classes } = props;
+function CustomizedBreadcrumbs() {
+  const classes = useStyles();
 
   return (
     <Paper elevation={0} className={classes.root}>
@@ -77,8 +68,4 @@ function CustomizedBreadcrumbs(props) {
   );
 }
 
-CustomizedBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CustomizedBreadcrumbs);
+export default CustomizedBreadcrumbs;
diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx
index ce74a1ad96d137..c06d9b4fa9b7a9 100644
--- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx
+++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import { emphasize } from '@material-ui/core/styles/colorManipulator';
 import Paper from '@material-ui/core/Paper';
 import Breadcrumbs from '@material-ui/core/Breadcrumbs';
@@ -9,52 +8,41 @@ import Avatar from '@material-ui/core/Avatar';
 import HomeIcon from '@material-ui/icons/Home';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-interface CustomBreadcrumbProps extends WithStyles<typeof styles> {}
+const StyledBreadcrumb = withStyles((theme: Theme) => ({
+  root: {
+    backgroundColor: theme.palette.grey[100],
+    height: 24,
+    color: theme.palette.grey[800],
+    fontWeight: theme.typography.fontWeightRegular,
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.grey[300],
+    },
+    '&:active': {
+      boxShadow: theme.shadows[1],
+      backgroundColor: emphasize(theme.palette.grey[300], 0.12),
+    },
+  },
+}))(Chip) as typeof Chip; // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
 
-interface CustomizedBreadcrumbsProps extends WithStyles<typeof styles> {}
+function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
+  event.preventDefault();
+  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
+}
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       padding: theme.spacing(1),
     },
-    chip: {
-      backgroundColor: theme.palette.grey[100],
-      height: 24,
-      color: theme.palette.grey[800],
-      fontWeight: theme.typography.fontWeightRegular,
-      '&:hover, &:focus': {
-        backgroundColor: theme.palette.grey[300],
-      },
-      '&:active': {
-        boxShadow: theme.shadows[1],
-        backgroundColor: emphasize(theme.palette.grey[300], 0.12),
-      },
-    },
     avatar: {
       background: 'none',
       marginRight: -theme.spacing(1.5),
     },
-  });
+  }),
+);
 
-function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
-  event.preventDefault();
-  alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert
-}
-
-function CustomBreadcrumb(props: CustomBreadcrumbProps) {
-  const { classes, ...rest } = props;
-  return <Chip className={classes.chip} {...rest} />;
-}
-
-CustomBreadcrumb.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb);
-
-function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) {
-  const { classes } = props;
+function CustomizedBreadcrumbs() {
+  const classes = useStyles();
 
   return (
     <Paper elevation={0} className={classes.root}>
@@ -82,8 +70,4 @@ function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) {
   );
 }
 
-CustomizedBreadcrumbs.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(CustomizedBreadcrumbs);
+export default CustomizedBreadcrumbs;
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
index d3501258fc5b47..4e75592ea01412 100644
--- a/docs/src/pages/demos/buttons/CustomizedButtons.js
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -1,23 +1,12 @@
 import React from 'react';
-import clsx from 'clsx';
-import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
+import { createMuiTheme, withStyles, makeStyles } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
 
-const useStyles = makeStyles(theme => ({
-  margin: {
-    margin: theme.spacing(1),
-  },
-  cssRoot: {
-    color: theme.palette.getContrastText(purple[500]),
-    backgroundColor: purple[500],
-    '&:hover': {
-      backgroundColor: purple[700],
-    },
-  },
-  bootstrapRoot: {
+const BootstrapButton = withStyles({
+  root: {
     boxShadow: 'none',
     textTransform: 'none',
     fontSize: 16,
@@ -51,6 +40,22 @@ const useStyles = makeStyles(theme => ({
       boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
     },
   },
+})(Button);
+
+const ColorButton = withStyles(theme => ({
+  root: {
+    color: theme.palette.getContrastText(purple[500]),
+    backgroundColor: purple[500],
+    '&:hover': {
+      backgroundColor: purple[700],
+    },
+  },
+}))(Button);
+
+const useStyles = makeStyles(theme => ({
+  margin: {
+    margin: theme.spacing(1),
+  },
 }));
 
 const theme = createMuiTheme({
@@ -64,22 +69,17 @@ function CustomizedButtons() {
 
   return (
     <div>
-      <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
+      <ColorButton variant="contained" color="primary" className={classes.margin}>
         Custom CSS
-      </Button>
+      </ColorButton>
       <ThemeProvider theme={theme}>
         <Button variant="contained" color="primary" className={classes.margin}>
-          ThemeProvider
+          Theme Provider
         </Button>
       </ThemeProvider>
-      <Button
-        variant="contained"
-        color="primary"
-        disableRipple
-        className={clsx(classes.margin, classes.bootstrapRoot)}
-      >
+      <BootstrapButton variant="contained" color="primary" disableRipple className={classes.margin}>
         Bootstrap
-      </Button>
+      </BootstrapButton>
     </div>
   );
 }
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.tsx b/docs/src/pages/demos/buttons/CustomizedButtons.tsx
index 0cd4aa9c120f14..e614ade196698e 100644
--- a/docs/src/pages/demos/buttons/CustomizedButtons.tsx
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.tsx
@@ -1,57 +1,68 @@
 import React from 'react';
-import clsx from 'clsx';
-import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import {
+  createMuiTheme,
+  createStyles,
+  withStyles,
+  makeStyles,
+  Theme,
+} from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
 
+const BootstrapButton = withStyles({
+  root: {
+    boxShadow: 'none',
+    textTransform: 'none',
+    fontSize: 16,
+    padding: '6px 12px',
+    border: '1px solid',
+    lineHeight: 1.5,
+    backgroundColor: '#007bff',
+    borderColor: '#007bff',
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+    '&:hover': {
+      backgroundColor: '#0069d9',
+      borderColor: '#0062cc',
+    },
+    '&:active': {
+      boxShadow: 'none',
+      backgroundColor: '#0062cc',
+      borderColor: '#005cbf',
+    },
+    '&:focus': {
+      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
+    },
+  },
+})(Button);
+
+const ColorButton = withStyles((theme: Theme) => ({
+  root: {
+    color: theme.palette.getContrastText(purple[500]),
+    backgroundColor: purple[500],
+    '&:hover': {
+      backgroundColor: purple[700],
+    },
+  },
+}))(Button);
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     margin: {
       margin: theme.spacing(1),
     },
-    cssRoot: {
-      color: theme.palette.getContrastText(purple[500]),
-      backgroundColor: purple[500],
-      '&:hover': {
-        backgroundColor: purple[700],
-      },
-    },
-    bootstrapRoot: {
-      boxShadow: 'none',
-      textTransform: 'none',
-      fontSize: 16,
-      padding: '6px 12px',
-      border: '1px solid',
-      lineHeight: 1.5,
-      backgroundColor: '#007bff',
-      borderColor: '#007bff',
-      fontFamily: [
-        '-apple-system',
-        'BlinkMacSystemFont',
-        '"Segoe UI"',
-        'Roboto',
-        '"Helvetica Neue"',
-        'Arial',
-        'sans-serif',
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
-      ].join(','),
-      '&:hover': {
-        backgroundColor: '#0069d9',
-        borderColor: '#0062cc',
-      },
-      '&:active': {
-        boxShadow: 'none',
-        backgroundColor: '#0062cc',
-        borderColor: '#005cbf',
-      },
-      '&:focus': {
-        boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
-      },
-    },
   }),
 );
 
@@ -66,22 +77,17 @@ function CustomizedButtons() {
 
   return (
     <div>
-      <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
+      <ColorButton variant="contained" color="primary" className={classes.margin}>
         Custom CSS
-      </Button>
+      </ColorButton>
       <ThemeProvider theme={theme}>
         <Button variant="contained" color="primary" className={classes.margin}>
-          ThemeProvider
+          Theme Provider
         </Button>
       </ThemeProvider>
-      <Button
-        variant="contained"
-        color="primary"
-        disableRipple
-        className={clsx(classes.margin, classes.bootstrapRoot)}
-      >
+      <BootstrapButton variant="contained" color="primary" disableRipple className={classes.margin}>
         Bootstrap
-      </Button>
+      </BootstrapButton>
     </div>
   );
 }
diff --git a/docs/src/pages/demos/dialogs/CustomizedDialog.tsx b/docs/src/pages/demos/dialogs/CustomizedDialog.tsx
index d50f5ffc9f1a06..e3cdad3b061004 100644
--- a/docs/src/pages/demos/dialogs/CustomizedDialog.tsx
+++ b/docs/src/pages/demos/dialogs/CustomizedDialog.tsx
@@ -43,13 +43,13 @@ const DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
   );
 });
 
-const DialogContent = withStyles(theme => ({
+const DialogContent = withStyles((theme: Theme) => ({
   root: {
     padding: theme.spacing(2),
   },
 }))(MuiDialogContent);
 
-const DialogActions = withStyles(theme => ({
+const DialogActions = withStyles((theme: Theme) => ({
   root: {
     margin: 0,
     padding: theme.spacing(1),
diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
index 3ec84239dd63e9..750b3f955f1e00 100644
--- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
+++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js
@@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography';
 
 const ExpansionPanel = withStyles({
   root: {
-    border: '1px solid rgba(0,0,0,.125)',
+    border: '1px solid rgba(0, 0, 0, .125)',
     boxShadow: 'none',
     '&:not(:last-child)': {
       borderBottom: 0,
@@ -15,16 +15,17 @@ const ExpansionPanel = withStyles({
     '&:before': {
       display: 'none',
     },
+    '&$expanded': {
+      margin: 'auto',
+    },
   },
-  expanded: {
-    margin: 'auto',
-  },
+  expanded: {},
 })(MuiExpansionPanel);
 
 const ExpansionPanelSummary = withStyles({
   root: {
-    backgroundColor: 'rgba(0,0,0,.03)',
-    borderBottom: '1px solid rgba(0,0,0,.125)',
+    backgroundColor: 'rgba(0, 0, 0, .03)',
+    borderBottom: '1px solid rgba(0, 0, 0, .125)',
     marginBottom: -1,
     minHeight: 56,
     '&$expanded': {
@@ -45,72 +46,53 @@ const ExpansionPanelDetails = withStyles(theme => ({
   },
 }))(MuiExpansionPanelDetails);
 
-class CustomizedExpansionPanel extends React.Component {
-  state = {
-    expanded: 'panel1',
-  };
+function CustomizedExpansionPanel() {
+  const [expanded, setExpanded] = React.useState('panel1');
 
-  handleChange = panel => (event, expanded) => {
-    this.setState({
-      expanded: expanded ? panel : false,
-    });
+  const handleChange = panel => (event, newExpanded) => {
+    setExpanded(newExpanded ? panel : false);
   };
 
-  render() {
-    const { expanded } = this.state;
-    return (
-      <div>
-        <ExpansionPanel
-          square
-          expanded={expanded === 'panel1'}
-          onChange={this.handleChange('panel1')}
-        >
-          <ExpansionPanelSummary aria-controls="panel1d-content" id="panel1d-header">
-            <Typography>Collapsible Group Item #1</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
-              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            </Typography>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel
-          square
-          expanded={expanded === 'panel2'}
-          onChange={this.handleChange('panel2')}
-        >
-          <ExpansionPanelSummary aria-controls="panel2d-content" id="panel2d-header">
-            <Typography>Collapsible Group Item #2</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
-              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            </Typography>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel
-          square
-          expanded={expanded === 'panel3'}
-          onChange={this.handleChange('panel3')}
-        >
-          <ExpansionPanelSummary aria-controls="panel3d-content" id="panel3d-header">
-            <Typography>Collapsible Group Item #3</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
-              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            </Typography>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <ExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+        <ExpansionPanelSummary aria-controls="panel1d-content" id="panel1d-header">
+          <Typography>Collapsible Group Item #1</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+      <ExpansionPanel square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+        <ExpansionPanelSummary aria-controls="panel2d-content" id="panel2d-header">
+          <Typography>Collapsible Group Item #2</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+      <ExpansionPanel square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+        <ExpansionPanelSummary aria-controls="panel3d-content" id="panel3d-header">
+          <Typography>Collapsible Group Item #3</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </div>
+  );
 }
 
 export default CustomizedExpansionPanel;
diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx
index b3d7d5ec285182..e8f59085b417d8 100644
--- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx
+++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx
@@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography';
 
 const ExpansionPanel = withStyles({
   root: {
-    border: '1px solid rgba(0,0,0,.125)',
+    border: '1px solid rgba(0, 0, 0, .125)',
     boxShadow: 'none',
     '&:not(:last-child)': {
       borderBottom: 0,
@@ -15,16 +15,17 @@ const ExpansionPanel = withStyles({
     '&:before': {
       display: 'none',
     },
+    '&$expanded': {
+      margin: 'auto',
+    },
   },
-  expanded: {
-    margin: 'auto',
-  },
+  expanded: {},
 })(MuiExpansionPanel);
 
 const ExpansionPanelSummary = withStyles({
   root: {
-    backgroundColor: 'rgba(0,0,0,.03)',
-    borderBottom: '1px solid rgba(0,0,0,.125)',
+    backgroundColor: 'rgba(0, 0, 0, .03)',
+    borderBottom: '1px solid rgba(0, 0, 0, .125)',
     marginBottom: -1,
     minHeight: 56,
     '&$expanded': {
@@ -49,72 +50,53 @@ interface CustomizedExpansionPanelStates {
   expanded: string | boolean;
 }
 
-class CustomizedExpansionPanel extends React.Component<{}, CustomizedExpansionPanelStates> {
-  state = {
-    expanded: 'panel1',
-  };
+function CustomizedExpansionPanel() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
 
-  handleChange = (panel: string) => (event: React.ChangeEvent<{}>, expanded: boolean) => {
-    this.setState({
-      expanded: expanded ? panel : false,
-    });
+  const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, newExpanded: boolean) => {
+    setExpanded(newExpanded ? panel : false);
   };
 
-  render() {
-    const { expanded } = this.state;
-    return (
-      <div>
-        <ExpansionPanel
-          square
-          expanded={expanded === 'panel1'}
-          onChange={this.handleChange('panel1')}
-        >
-          <ExpansionPanelSummary aria-controls="panel1d-content" id="panel1d-header">
-            <Typography>Collapsible Group Item #1</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
-              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            </Typography>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel
-          square
-          expanded={expanded === 'panel2'}
-          onChange={this.handleChange('panel2')}
-        >
-          <ExpansionPanelSummary aria-controls="panel2d-content" id="panel2d-header">
-            <Typography>Collapsible Group Item #2</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
-              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            </Typography>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel
-          square
-          expanded={expanded === 'panel3'}
-          onChange={this.handleChange('panel3')}
-        >
-          <ExpansionPanelSummary aria-controls="panel3d-content" id="panel3d-header">
-            <Typography>Collapsible Group Item #3</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails>
-            <Typography>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
-              ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-            </Typography>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-      </div>
-    );
-  }
+  return (
+    <div>
+      <ExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+        <ExpansionPanelSummary aria-controls="panel1d-content" id="panel1d-header">
+          <Typography>Collapsible Group Item #1</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+      <ExpansionPanel square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+        <ExpansionPanelSummary aria-controls="panel2d-content" id="panel2d-header">
+          <Typography>Collapsible Group Item #2</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+      <ExpansionPanel square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+        <ExpansionPanelSummary aria-controls="panel3d-content" id="panel3d-header">
+          <Typography>Collapsible Group Item #3</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </Typography>
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </div>
+  );
 }
 
 export default CustomizedExpansionPanel;
diff --git a/docs/src/pages/demos/progress/CustomizedProgress.js b/docs/src/pages/demos/progress/CustomizedProgress.js
index 1dc8a6295d7608..2ebd486ca080dd 100644
--- a/docs/src/pages/demos/progress/CustomizedProgress.js
+++ b/docs/src/pages/demos/progress/CustomizedProgress.js
@@ -1,43 +1,44 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import { lighten } from '@material-ui/core/styles/colorManipulator';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import Paper from '@material-ui/core/Paper';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const styles = theme => ({
+const ColorCircularProgress = withStyles({
   root: {
-    flexGrow: 1,
-  },
-  progress: {
-    margin: theme.spacing(2),
     color: '#00695c',
   },
-  linearColorPrimary: {
+})(CircularProgress);
+
+const ColorLinearProgress = withStyles({
+  colorPrimary: {
     backgroundColor: '#b2dfdb',
   },
-  linearBarColorPrimary: {
+  barColorPrimary: {
     backgroundColor: '#00695c',
   },
-  linearProgressDeterminate: {
-    margin: `${theme.spacing(1)}px auto 0`,
+})(LinearProgress);
+
+const BorderLinearProgress = withStyles({
+  root: {
     height: 10,
     backgroundColor: lighten('#ff6c5c', 0.5),
   },
-  linearProgressDeterminateBar: {
+  bar: {
     borderRadius: 20,
     backgroundColor: '#ff6c5c',
   },
-  // Reproduce the Facebook spinners.
-  facebook: {
-    margin: theme.spacing(2),
+})(LinearProgress);
+
+// Inspired by the Facebook spinners.
+const useStylesFacebook = makeStyles({
+  root: {
     position: 'relative',
   },
-  facebook1: {
+  top: {
     color: '#eef3fd',
   },
-  facebook2: {
+  bottom: {
     color: '#6798e5',
     animationDuration: '550ms',
     position: 'absolute',
@@ -45,49 +46,56 @@ const styles = theme => ({
   },
 });
 
-function CustomizedProgress(props) {
-  const { classes } = props;
+function FacebookProgress(props) {
+  const classes = useStylesFacebook();
 
   return (
-    <Paper className={classes.root}>
-      <CircularProgress className={classes.progress} size={30} thickness={5} />
-      <LinearProgress
-        classes={{
-          colorPrimary: classes.linearColorPrimary,
-          barColorPrimary: classes.linearBarColorPrimary,
-        }}
+    <div className={classes.root}>
+      <CircularProgress
+        variant="determinate"
+        value={100}
+        className={classes.top}
+        size={24}
+        thickness={4}
+        {...props}
       />
-      <LinearProgress
+      <CircularProgress
+        variant="indeterminate"
+        disableShrink
+        className={classes.bottom}
+        size={24}
+        thickness={4}
+        {...props}
+      />
+    </div>
+  );
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  margin: {
+    margin: theme.spacing(1),
+  },
+}));
+
+function CustomizedProgress() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <ColorCircularProgress size={30} thickness={5} />
+      <ColorLinearProgress className={classes.margin} />
+      <BorderLinearProgress
+        className={classes.margin}
         variant="determinate"
         color="secondary"
         value={50}
-        classes={{
-          root: classes.linearProgressDeterminate,
-          bar: classes.linearProgressDeterminateBar,
-        }}
       />
-      <div className={classes.facebook}>
-        <CircularProgress
-          variant="determinate"
-          value={100}
-          className={classes.facebook1}
-          size={24}
-          thickness={4}
-        />
-        <CircularProgress
-          variant="indeterminate"
-          disableShrink
-          className={classes.facebook2}
-          size={24}
-          thickness={4}
-        />
-      </div>
-    </Paper>
+      <FacebookProgress />
+    </div>
   );
 }
 
-CustomizedProgress.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CustomizedProgress);
+export default CustomizedProgress;
diff --git a/docs/src/pages/demos/progress/CustomizedProgress.tsx b/docs/src/pages/demos/progress/CustomizedProgress.tsx
index b60ef8afd0eda6..f8d2f9ef6ce3d9 100644
--- a/docs/src/pages/demos/progress/CustomizedProgress.tsx
+++ b/docs/src/pages/demos/progress/CustomizedProgress.tsx
@@ -1,96 +1,103 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles, createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
 import { lighten } from '@material-ui/core/styles/colorManipulator';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Paper from '@material-ui/core/Paper';
+import CircularProgress, { CircularProgressProps } from '@material-ui/core/CircularProgress';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-const styles = (theme: Theme) =>
+const ColorCircularProgress = withStyles({
+  root: {
+    color: '#00695c',
+  },
+})(CircularProgress);
+
+const ColorLinearProgress = withStyles({
+  colorPrimary: {
+    backgroundColor: '#b2dfdb',
+  },
+  barColorPrimary: {
+    backgroundColor: '#00695c',
+  },
+})(LinearProgress);
+
+const BorderLinearProgress = withStyles({
+  root: {
+    height: 10,
+    backgroundColor: lighten('#ff6c5c', 0.5),
+  },
+  bar: {
+    borderRadius: 20,
+    backgroundColor: '#ff6c5c',
+  },
+})(LinearProgress);
+
+// Inspired by the Facebook spinners.
+const useStylesFacebook = makeStyles({
+  root: {
+    position: 'relative',
+  },
+  top: {
+    color: '#eef3fd',
+  },
+  bottom: {
+    color: '#6798e5',
+    animationDuration: '550ms',
+    position: 'absolute',
+    left: 0,
+  },
+});
+
+function FacebookProgress(props: CircularProgressProps) {
+  const classes = useStylesFacebook();
+
+  return (
+    <div className={classes.root}>
+      <CircularProgress
+        variant="determinate"
+        value={100}
+        className={classes.top}
+        size={24}
+        thickness={4}
+        {...props}
+      />
+      <CircularProgress
+        variant="indeterminate"
+        disableShrink
+        className={classes.bottom}
+        size={24}
+        thickness={4}
+        {...props}
+      />
+    </div>
+  );
+}
+
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       flexGrow: 1,
     },
-    progress: {
-      margin: theme.spacing(2),
-      color: '#00695c',
-    },
-    linearColorPrimary: {
-      backgroundColor: '#b2dfdb',
-    },
-    linearBarColorPrimary: {
-      backgroundColor: '#00695c',
-    },
-    linearProgressDeterminate: {
-      margin: `${theme.spacing(1)}px auto 0`,
-      height: 10,
-      backgroundColor: lighten('#ff6c5c', 0.5),
-    },
-    linearProgressDeterminateBar: {
-      borderRadius: 20,
-      backgroundColor: '#ff6c5c',
-    },
-    // Reproduce the Facebook spinners.
-    facebook: {
-      margin: theme.spacing(2),
-      position: 'relative',
+    margin: {
+      margin: theme.spacing(1),
     },
-    facebook1: {
-      color: '#eef3fd',
-    },
-    facebook2: {
-      color: '#6798e5',
-      animationDuration: '550ms',
-      position: 'absolute',
-      left: 0,
-    },
-  });
-
-export type Props = WithStyles<typeof styles>;
+  }),
+);
 
-function CustomizedProgress(props: Props) {
-  const { classes } = props;
+function CustomizedProgress() {
+  const classes = useStyles();
 
   return (
-    <Paper className={classes.root}>
-      <CircularProgress className={classes.progress} size={30} thickness={5} />
-      <LinearProgress
-        classes={{
-          colorPrimary: classes.linearColorPrimary,
-          barColorPrimary: classes.linearBarColorPrimary,
-        }}
-      />
-      <LinearProgress
+    <div className={classes.root}>
+      <ColorCircularProgress size={30} thickness={5} />
+      <ColorLinearProgress className={classes.margin} />
+      <BorderLinearProgress
+        className={classes.margin}
         variant="determinate"
         color="secondary"
         value={50}
-        classes={{
-          root: classes.linearProgressDeterminate,
-          bar: classes.linearProgressDeterminateBar,
-        }}
       />
-      <div className={classes.facebook}>
-        <CircularProgress
-          variant="determinate"
-          value={100}
-          className={classes.facebook1}
-          size={24}
-          thickness={4}
-        />
-        <CircularProgress
-          variant="indeterminate"
-          disableShrink
-          className={classes.facebook2}
-          size={24}
-          thickness={4}
-        />
-      </div>
-    </Paper>
+      <FacebookProgress />
+    </div>
   );
 }
 
-CustomizedProgress.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(CustomizedProgress);
+export default CustomizedProgress;
diff --git a/docs/src/pages/demos/selects/CustomizedSelects.js b/docs/src/pages/demos/selects/CustomizedSelects.js
index dafda903e494d2..b3db9a9e4c73b7 100644
--- a/docs/src/pages/demos/selects/CustomizedSelects.js
+++ b/docs/src/pages/demos/selects/CustomizedSelects.js
@@ -51,9 +51,6 @@ const useStyles = makeStyles(theme => ({
   margin: {
     margin: theme.spacing(1),
   },
-  bootstrapFormLabel: {
-    fontSize: 18,
-  },
 }));
 
 function CustomizedSelects() {
@@ -65,15 +62,11 @@ function CustomizedSelects() {
   return (
     <form className={classes.root} autoComplete="off">
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="age-customized-select">Age</InputLabel>
         <BootstrapInput />
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="age-customized-select">Age</InputLabel>
         <Select
           value={age}
           onChange={handleChange}
@@ -88,9 +81,7 @@ function CustomizedSelects() {
         </Select>
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-native-simple" className={classes.bootstrapFormLabel}>
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="age-customized-native-simple">Age</InputLabel>
         <NativeSelect
           value={age}
           onChange={handleChange}
diff --git a/docs/src/pages/demos/selects/CustomizedSelects.tsx b/docs/src/pages/demos/selects/CustomizedSelects.tsx
index 487332ccb5c387..79866e7796a2ad 100644
--- a/docs/src/pages/demos/selects/CustomizedSelects.tsx
+++ b/docs/src/pages/demos/selects/CustomizedSelects.tsx
@@ -52,9 +52,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   margin: {
     margin: theme.spacing(1),
   },
-  bootstrapFormLabel: {
-    fontSize: 18,
-  },
 }));
 
 function CustomizedSelects() {
@@ -66,15 +63,11 @@ function CustomizedSelects() {
   return (
     <form className={classes.root} autoComplete="off">
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="age-customized-select">Age</InputLabel>
         <BootstrapInput />
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-select" className={classes.bootstrapFormLabel}>
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="age-customized-select">Age</InputLabel>
         <Select
           value={age}
           onChange={handleChange}
@@ -89,9 +82,7 @@ function CustomizedSelects() {
         </Select>
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-native-simple" className={classes.bootstrapFormLabel}>
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="age-customized-native-simple">Age</InputLabel>
         <NativeSelect
           value={age}
           onChange={handleChange}
diff --git a/docs/src/pages/demos/tables/CustomizedTable.js b/docs/src/pages/demos/tables/CustomizedTable.js
index 9a550bbef1d7b6..f0bf33659501c0 100644
--- a/docs/src/pages/demos/tables/CustomizedTable.js
+++ b/docs/src/pages/demos/tables/CustomizedTable.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -8,7 +7,7 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
-const CustomTableCell = withStyles(theme => ({
+const StyledTableCell = withStyles(theme => ({
   head: {
     backgroundColor: theme.palette.common.black,
     color: theme.palette.common.white,
@@ -18,21 +17,13 @@ const CustomTableCell = withStyles(theme => ({
   },
 }))(TableCell);
 
-const styles = theme => ({
+const StyledTableRow = withStyles(theme => ({
   root: {
-    width: '100%',
-    marginTop: theme.spacing(3),
-    overflowX: 'auto',
-  },
-  table: {
-    minWidth: 700,
-  },
-  row: {
     '&:nth-of-type(odd)': {
       backgroundColor: theme.palette.background.default,
     },
   },
-});
+}))(TableRow);
 
 function createData(name, calories, fat, carbs, protein) {
   return { name, calories, fat, carbs, protein };
@@ -46,32 +37,43 @@ const rows = [
   createData('Gingerbread', 356, 16.0, 49, 3.9),
 ];
 
-function CustomizedTable(props) {
-  const { classes } = props;
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+    overflowX: 'auto',
+  },
+  table: {
+    minWidth: 700,
+  },
+}));
+
+function CustomizedTable() {
+  const classes = useStyles();
 
   return (
     <Paper className={classes.root}>
       <Table className={classes.table}>
         <TableHead>
           <TableRow>
-            <CustomTableCell>Dessert (100g serving)</CustomTableCell>
-            <CustomTableCell align="right">Calories</CustomTableCell>
-            <CustomTableCell align="right">Fat&nbsp;(g)</CustomTableCell>
-            <CustomTableCell align="right">Carbs&nbsp;(g)</CustomTableCell>
-            <CustomTableCell align="right">Protein&nbsp;(g)</CustomTableCell>
+            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+            <StyledTableCell align="right">Calories</StyledTableCell>
+            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
+            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
+            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {rows.map(row => (
-            <TableRow className={classes.row} key={row.name}>
-              <CustomTableCell component="th" scope="row">
+            <StyledTableRow key={row.name}>
+              <StyledTableCell component="th" scope="row">
                 {row.name}
-              </CustomTableCell>
-              <CustomTableCell align="right">{row.calories}</CustomTableCell>
-              <CustomTableCell align="right">{row.fat}</CustomTableCell>
-              <CustomTableCell align="right">{row.carbs}</CustomTableCell>
-              <CustomTableCell align="right">{row.protein}</CustomTableCell>
-            </TableRow>
+              </StyledTableCell>
+              <StyledTableCell align="right">{row.calories}</StyledTableCell>
+              <StyledTableCell align="right">{row.fat}</StyledTableCell>
+              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
+              <StyledTableCell align="right">{row.protein}</StyledTableCell>
+            </StyledTableRow>
           ))}
         </TableBody>
       </Table>
@@ -79,8 +81,4 @@ function CustomizedTable(props) {
   );
 }
 
-CustomizedTable.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CustomizedTable);
+export default CustomizedTable;
diff --git a/docs/src/pages/demos/tables/CustomizedTable.tsx b/docs/src/pages/demos/tables/CustomizedTable.tsx
index 1d2772a9fb9e5e..fade60e3cd0b7f 100644
--- a/docs/src/pages/demos/tables/CustomizedTable.tsx
+++ b/docs/src/pages/demos/tables/CustomizedTable.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -8,7 +7,7 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 
-const CustomTableCell = withStyles((theme: Theme) =>
+const StyledTableCell = withStyles((theme: Theme) =>
   createStyles({
     head: {
       backgroundColor: theme.palette.common.black,
@@ -20,22 +19,15 @@ const CustomTableCell = withStyles((theme: Theme) =>
   }),
 )(TableCell);
 
-const styles = (theme: Theme) =>
+const StyledTableRow = withStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '100%',
-      marginTop: theme.spacing(3),
-      overflowX: 'auto',
-    },
-    table: {
-      minWidth: 700,
-    },
-    row: {
       '&:nth-of-type(odd)': {
         backgroundColor: theme.palette.background.default,
       },
     },
-  });
+  }),
+)(TableRow);
 
 function createData(name: string, calories: number, fat: number, carbs: number, protein: number) {
   return { name, calories, fat, carbs, protein };
@@ -49,34 +41,45 @@ const rows = [
   createData('Gingerbread', 356, 16.0, 49, 3.9),
 ];
 
-export interface CustomizedTableProps extends WithStyles<typeof styles> {}
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      marginTop: theme.spacing(3),
+      overflowX: 'auto',
+    },
+    table: {
+      minWidth: 700,
+    },
+  }),
+);
 
-function CustomizedTable(props: CustomizedTableProps) {
-  const { classes } = props;
+function CustomizedTable() {
+  const classes = useStyles();
 
   return (
     <Paper className={classes.root}>
       <Table className={classes.table}>
         <TableHead>
           <TableRow>
-            <CustomTableCell>Dessert (100g serving)</CustomTableCell>
-            <CustomTableCell align="right">Calories</CustomTableCell>
-            <CustomTableCell align="right">Fat&nbsp;(g)</CustomTableCell>
-            <CustomTableCell align="right">Carbs&nbsp;(g)</CustomTableCell>
-            <CustomTableCell align="right">Protein&nbsp;(g)</CustomTableCell>
+            <StyledTableCell>Dessert (100g serving)</StyledTableCell>
+            <StyledTableCell align="right">Calories</StyledTableCell>
+            <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
+            <StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
+            <StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
           </TableRow>
         </TableHead>
         <TableBody>
           {rows.map(row => (
-            <TableRow className={classes.row} key={row.name}>
-              <CustomTableCell component="th" scope="row">
+            <StyledTableRow key={row.name}>
+              <StyledTableCell component="th" scope="row">
                 {row.name}
-              </CustomTableCell>
-              <CustomTableCell align="right">{row.calories}</CustomTableCell>
-              <CustomTableCell align="right">{row.fat}</CustomTableCell>
-              <CustomTableCell align="right">{row.carbs}</CustomTableCell>
-              <CustomTableCell align="right">{row.protein}</CustomTableCell>
-            </TableRow>
+              </StyledTableCell>
+              <StyledTableCell align="right">{row.calories}</StyledTableCell>
+              <StyledTableCell align="right">{row.fat}</StyledTableCell>
+              <StyledTableCell align="right">{row.carbs}</StyledTableCell>
+              <StyledTableCell align="right">{row.protein}</StyledTableCell>
+            </StyledTableRow>
           ))}
         </TableBody>
       </Table>
@@ -84,8 +87,4 @@ function CustomizedTable(props: CustomizedTableProps) {
   );
 }
 
-CustomizedTable.propTypes = {
-  classes: PropTypes.object.isRequired,
-} as any;
-
-export default withStyles(styles)(CustomizedTable);
+export default CustomizedTable;
diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.js b/docs/src/pages/demos/tabs/CustomizedTabs.js
index e02c76f68f6cdc..000d4527de6caa 100644
--- a/docs/src/pages/demos/tabs/CustomizedTabs.js
+++ b/docs/src/pages/demos/tabs/CustomizedTabs.js
@@ -27,18 +27,17 @@ const StyledTab = withStyles(theme => ({
   },
 }))(props => <Tab disableRipple {...props} />);
 
-const useStyles = makeStyles(theme => ({
+const AntTabs = withStyles({
   root: {
-    flexGrow: 1,
-    backgroundColor: theme.palette.background.paper,
-  },
-  tabsRoot: {
     borderBottom: '1px solid #e8e8e8',
   },
-  tabsIndicator: {
+  indicator: {
     backgroundColor: '#1890ff',
   },
-  tabRoot: {
+})(Tabs);
+
+const AntTab = withStyles(theme => ({
+  root: {
     textTransform: 'none',
     minWidth: 72,
     fontWeight: theme.typography.fontWeightRegular,
@@ -59,7 +58,7 @@ const useStyles = makeStyles(theme => ({
       color: '#40a9ff',
       opacity: 1,
     },
-    '&$tabSelected': {
+    '&$selected': {
       color: '#1890ff',
       fontWeight: theme.typography.fontWeightMedium,
     },
@@ -67,10 +66,19 @@ const useStyles = makeStyles(theme => ({
       color: '#40a9ff',
     },
   },
-  tabSelected: {},
+  selected: {},
+}))(props => <Tab disableRipple {...props} />);
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
   typography: {
     padding: theme.spacing(3),
   },
+  demo1: {
+    backgroundColor: theme.palette.background.paper,
+  },
   demo2: {
     backgroundColor: '#2e1534',
   },
@@ -86,28 +94,14 @@ function CustomizedTabs() {
 
   return (
     <div className={classes.root}>
-      <Tabs
-        value={value}
-        onChange={handleChange}
-        classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
-      >
-        <Tab
-          disableRipple
-          classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          label="Tab 1"
-        />
-        <Tab
-          disableRipple
-          classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          label="Tab 2"
-        />
-        <Tab
-          disableRipple
-          classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          label="Tab 3"
-        />
-      </Tabs>
-      <Typography className={classes.typography}>Ant Design UI powered by Material-UI</Typography>
+      <div className={classes.demo1}>
+        <AntTabs value={value} onChange={handleChange}>
+          <AntTab label="Tab 1" />
+          <AntTab label="Tab 2" />
+          <AntTab label="Tab 3" />
+        </AntTabs>
+        <Typography className={classes.typography} />
+      </div>
       <div className={classes.demo2}>
         <StyledTabs value={value} onChange={handleChange}>
           <StyledTab label="Workflows" />
diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.tsx b/docs/src/pages/demos/tabs/CustomizedTabs.tsx
index 06a75876478e27..54a64925d05204 100644
--- a/docs/src/pages/demos/tabs/CustomizedTabs.tsx
+++ b/docs/src/pages/demos/tabs/CustomizedTabs.tsx
@@ -38,54 +38,66 @@ const StyledTab = withStyles((theme: Theme) =>
   }),
 )((props: StyledTabProps) => <Tab disableRipple {...props} />);
 
-const useStyles = makeStyles((theme: Theme) => ({
+const AntTabs = withStyles({
   root: {
-    flexGrow: 1,
-    backgroundColor: theme.palette.background.paper,
-  },
-  tabsRoot: {
     borderBottom: '1px solid #e8e8e8',
   },
-  tabsIndicator: {
+  indicator: {
     backgroundColor: '#1890ff',
   },
-  tabRoot: {
-    textTransform: 'none',
-    minWidth: 72,
-    fontWeight: theme.typography.fontWeightRegular,
-    marginRight: theme.spacing(4),
-    fontFamily: [
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-    ].join(','),
-    '&:hover': {
-      color: '#40a9ff',
-      opacity: 1,
+})(Tabs);
+
+const AntTab = withStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      textTransform: 'none',
+      minWidth: 72,
+      fontWeight: theme.typography.fontWeightRegular,
+      marginRight: theme.spacing(4),
+      fontFamily: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+      ].join(','),
+      '&:hover': {
+        color: '#40a9ff',
+        opacity: 1,
+      },
+      '&$selected': {
+        color: '#1890ff',
+        fontWeight: theme.typography.fontWeightMedium,
+      },
+      '&:focus': {
+        color: '#40a9ff',
+      },
+    },
+    selected: {},
+  }),
+)((props: StyledTabProps) => <Tab disableRipple {...props} />);
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
     },
-    '&$tabSelected': {
-      color: '#1890ff',
-      fontWeight: theme.typography.fontWeightMedium,
+    typography: {
+      padding: theme.spacing(3),
     },
-    '&:focus': {
-      color: '#40a9ff',
+    demo1: {
+      backgroundColor: theme.palette.background.paper,
     },
-  },
-  tabSelected: {},
-  typography: {
-    padding: theme.spacing(3),
-  },
-  demo2: {
-    backgroundColor: '#2e1534',
-  },
-}));
+    demo2: {
+      backgroundColor: '#2e1534',
+    },
+  }),
+);
 
 function CustomizedTabs() {
   const classes = useStyles();
@@ -97,28 +109,14 @@ function CustomizedTabs() {
 
   return (
     <div className={classes.root}>
-      <Tabs
-        value={value}
-        onChange={handleChange}
-        classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
-      >
-        <Tab
-          disableRipple
-          classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          label="Tab 1"
-        />
-        <Tab
-          disableRipple
-          classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          label="Tab 2"
-        />
-        <Tab
-          disableRipple
-          classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-          label="Tab 3"
-        />
-      </Tabs>
-      <Typography className={classes.typography}>Ant Design UI powered by Material-UI</Typography>
+      <div className={classes.demo1}>
+        <AntTabs value={value} onChange={handleChange}>
+          <AntTab label="Tab 1" />
+          <AntTab label="Tab 2" />
+          <AntTab label="Tab 3" />
+        </AntTabs>
+        <Typography className={classes.typography} />
+      </div>
       <div className={classes.demo2}>
         <StyledTabs value={value} onChange={handleChange}>
           <StyledTab label="Workflows" />
diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.js
index 60b3700208b194..610bed2870fc6d 100644
--- a/docs/src/pages/demos/tooltips/CustomizedTooltips.js
+++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.js
@@ -1,5 +1,6 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
@@ -51,17 +52,62 @@ function arrowGenerator(color) {
   };
 }
 
-const useStyles = makeStyles(theme => ({
-  button: {
-    margin: theme.spacing(1),
-  },
-  lightTooltip: {
+const LightTooltip = withStyles(theme => ({
+  tooltip: {
     backgroundColor: theme.palette.common.white,
     color: 'rgba(0, 0, 0, 0.87)',
     boxShadow: theme.shadows[1],
     fontSize: 11,
   },
-  arrowPopper: arrowGenerator(theme.palette.grey[700]),
+}))(Tooltip);
+
+const useStylesArrow = makeStyles(theme => ({
+  arrow: {
+    position: 'absolute',
+    fontSize: 6,
+    width: '3em',
+    height: '3em',
+    '&::before': {
+      content: '""',
+      margin: 'auto',
+      display: 'block',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+    },
+  },
+  popper: arrowGenerator(theme.palette.grey[700]),
+}));
+
+function ArrowTooltip(props) {
+  const { arrow, ...classes } = useStylesArrow();
+  const [arrowRef, setArrowRef] = React.useState(null);
+
+  return (
+    <Tooltip
+      classes={classes}
+      PopperProps={{
+        popperOptions: {
+          modifiers: {
+            arrow: {
+              enabled: Boolean(arrowRef),
+              element: arrowRef,
+            },
+          },
+        },
+      }}
+      {...props}
+      title={
+        <React.Fragment>
+          {props.title}
+          <span className={arrow} ref={setArrowRef} />
+        </React.Fragment>
+      }
+    />
+  );
+}
+
+const useStylesBootstrap = makeStyles(theme => ({
   arrow: {
     position: 'absolute',
     fontSize: 6,
@@ -76,24 +122,54 @@ const useStyles = makeStyles(theme => ({
       borderStyle: 'solid',
     },
   },
-  bootstrapPopper: arrowGenerator(theme.palette.common.black),
-  bootstrapTooltip: {
+  popper: arrowGenerator(theme.palette.common.black),
+  tooltip: {
     backgroundColor: theme.palette.common.black,
   },
-  bootstrapPlacementLeft: {
+  tooltipPlacementLeft: {
     margin: '0 8px',
   },
-  bootstrapPlacementRight: {
+  tooltipPlacementRight: {
     margin: '0 8px',
   },
-  bootstrapPlacementTop: {
+  tooltipPlacementTop: {
     margin: '8px 0',
   },
-  bootstrapPlacementBottom: {
+  tooltipPlacementBottom: {
     margin: '8px 0',
   },
-  htmlPopper: arrowGenerator('#dadde9'),
-  htmlTooltip: {
+}));
+
+function BootstrapTooltip(props) {
+  const { arrow, ...classes } = useStylesBootstrap();
+  const [arrowRef, setArrowRef] = React.useState(null);
+
+  return (
+    <Tooltip
+      classes={classes}
+      PopperProps={{
+        popperOptions: {
+          modifiers: {
+            arrow: {
+              enabled: Boolean(arrowRef),
+              element: arrowRef,
+            },
+          },
+        },
+      }}
+      {...props}
+      title={
+        <React.Fragment>
+          {props.title}
+          <span className={arrow} ref={setArrowRef} />
+        </React.Fragment>
+      }
+    />
+  );
+}
+
+const HtmlTooltip = withStyles(theme => ({
+  tooltip: {
     backgroundColor: '#f5f5f9',
     color: 'rgba(0, 0, 0, 0.87)',
     maxWidth: 220,
@@ -103,92 +179,31 @@ const useStyles = makeStyles(theme => ({
       fontWeight: theme.typography.fontWeightMedium,
     },
   },
-}));
+}))(Tooltip);
 
 function CustomizedTooltips() {
-  const classes = useStyles();
-  const [arrowRef, setArrowRef] = React.useState(null);
-
   return (
     <div>
-      <Tooltip title="Add" classes={{ tooltip: classes.lightTooltip }}>
-        <Button className={classes.button}>Light</Button>
-      </Tooltip>
-      <Tooltip
-        title={
-          <React.Fragment>
-            Add
-            <span className={classes.arrow} ref={setArrowRef} />
-          </React.Fragment>
-        }
-        classes={{ popper: classes.arrowPopper }}
-        PopperProps={{
-          popperOptions: {
-            modifiers: {
-              arrow: {
-                enabled: Boolean(arrowRef),
-                element: arrowRef,
-              },
-            },
-          },
-        }}
-      >
-        <Button className={classes.button}>Arrow</Button>
-      </Tooltip>
-      <Tooltip
-        title={
-          <React.Fragment>
-            Add
-            <span className={classes.arrow} ref={setArrowRef} />
-          </React.Fragment>
-        }
-        classes={{
-          tooltip: classes.bootstrapTooltip,
-          popper: classes.bootstrapPopper,
-          tooltipPlacementLeft: classes.bootstrapPlacementLeft,
-          tooltipPlacementRight: classes.bootstrapPlacementRight,
-          tooltipPlacementTop: classes.bootstrapPlacementTop,
-          tooltipPlacementBottom: classes.bootstrapPlacementBottom,
-        }}
-        PopperProps={{
-          popperOptions: {
-            modifiers: {
-              arrow: {
-                enabled: Boolean(arrowRef),
-                element: arrowRef,
-              },
-            },
-          },
-        }}
-      >
-        <Button className={classes.button}>Bootstrap</Button>
-      </Tooltip>
-      <Tooltip
-        classes={{
-          popper: classes.htmlPopper,
-          tooltip: classes.htmlTooltip,
-        }}
-        PopperProps={{
-          popperOptions: {
-            modifiers: {
-              arrow: {
-                enabled: Boolean(arrowRef),
-                element: arrowRef,
-              },
-            },
-          },
-        }}
+      <LightTooltip title="Add">
+        <Button>Light</Button>
+      </LightTooltip>
+      <ArrowTooltip title="Add">
+        <Button>Arrow</Button>
+      </ArrowTooltip>
+      <BootstrapTooltip title="Add">
+        <Button>Bootstrap</Button>
+      </BootstrapTooltip>
+      <HtmlTooltip
         title={
           <React.Fragment>
             <Typography color="inherit">Tooltip with HTML</Typography>
             <em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
             {"It's very engaging. Right?"}
-            <span className={classes.arrow} ref={setArrowRef} />
           </React.Fragment>
         }
       >
-        <Button className={classes.button}>HTML</Button>
-      </Tooltip>
+        <Button>HTML</Button>
+      </HtmlTooltip>
     </div>
   );
 }
diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx b/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx
index 6c3262042d963e..b0c87c886a6876 100644
--- a/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx
+++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx
@@ -1,7 +1,8 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { withStyles, Theme, makeStyles, createStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
+import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 
 function arrowGenerator(color: string) {
@@ -51,18 +52,65 @@ function arrowGenerator(color: string) {
   };
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const LightTooltip = withStyles((theme: Theme) => ({
+  tooltip: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 11,
+  },
+}))(Tooltip);
+
+const useStylesArrow = makeStyles((theme: Theme) =>
   createStyles({
-    button: {
-      margin: theme.spacing(1),
-    },
-    lightTooltip: {
-      backgroundColor: theme.palette.common.white,
-      color: 'rgba(0, 0, 0, 0.87)',
-      boxShadow: theme.shadows[1],
-      fontSize: 11,
+    arrow: {
+      position: 'absolute',
+      fontSize: 6,
+      width: '3em',
+      height: '3em',
+      '&::before': {
+        content: '""',
+        margin: 'auto',
+        display: 'block',
+        width: 0,
+        height: 0,
+        borderStyle: 'solid',
+      },
     },
-    arrowPopper: arrowGenerator(theme.palette.grey[700]),
+    popper: arrowGenerator(theme.palette.grey[700]),
+  }),
+);
+
+function ArrowTooltip(props: TooltipProps) {
+  const { arrow, ...classes } = useStylesArrow();
+  const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);
+
+  return (
+    <Tooltip
+      classes={classes}
+      PopperProps={{
+        popperOptions: {
+          modifiers: {
+            arrow: {
+              enabled: Boolean(arrowRef),
+              element: arrowRef,
+            },
+          },
+        },
+      }}
+      {...props}
+      title={
+        <React.Fragment>
+          {props.title}
+          <span className={arrow} ref={setArrowRef} />
+        </React.Fragment>
+      }
+    />
+  );
+}
+
+const useStylesBootstrap = makeStyles((theme: Theme) =>
+  createStyles({
     arrow: {
       position: 'absolute',
       fontSize: 6,
@@ -77,120 +125,89 @@ const useStyles = makeStyles((theme: Theme) =>
         borderStyle: 'solid',
       },
     },
-    bootstrapPopper: arrowGenerator(theme.palette.common.black),
-    bootstrapTooltip: {
+    popper: arrowGenerator(theme.palette.common.black),
+    tooltip: {
       backgroundColor: theme.palette.common.black,
     },
-    bootstrapPlacementLeft: {
+    tooltipPlacementLeft: {
       margin: '0 8px',
     },
-    bootstrapPlacementRight: {
+    tooltipPlacementRight: {
       margin: '0 8px',
     },
-    bootstrapPlacementTop: {
+    tooltipPlacementTop: {
       margin: '8px 0',
     },
-    bootstrapPlacementBottom: {
+    tooltipPlacementBottom: {
       margin: '8px 0',
     },
-    htmlPopper: arrowGenerator('#dadde9'),
-    htmlTooltip: {
-      backgroundColor: '#f5f5f9',
-      color: 'rgba(0, 0, 0, 0.87)',
-      maxWidth: 220,
-      fontSize: theme.typography.pxToRem(12),
-      border: '1px solid #dadde9',
-      '& b': {
-        fontWeight: theme.typography.fontWeightMedium,
-      },
-    },
   }),
 );
 
-function CustomizedTooltips() {
-  const classes = useStyles();
+function BootstrapTooltip(props: TooltipProps) {
+  const { arrow, ...classes } = useStylesBootstrap();
   const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);
 
   return (
-    <div>
-      <Tooltip title="Add" classes={{ tooltip: classes.lightTooltip }}>
-        <Button className={classes.button}>Light</Button>
-      </Tooltip>
-      <Tooltip
-        title={
-          <React.Fragment>
-            Add
-            <span className={classes.arrow} ref={setArrowRef} />
-          </React.Fragment>
-        }
-        classes={{ popper: classes.arrowPopper }}
-        PopperProps={{
-          popperOptions: {
-            modifiers: {
-              arrow: {
-                enabled: Boolean(arrowRef),
-                element: arrowRef,
-              },
-            },
-          },
-        }}
-      >
-        <Button className={classes.button}>Arrow</Button>
-      </Tooltip>
-      <Tooltip
-        title={
-          <React.Fragment>
-            Add
-            <span className={classes.arrow} ref={setArrowRef} />
-          </React.Fragment>
-        }
-        classes={{
-          tooltip: classes.bootstrapTooltip,
-          popper: classes.bootstrapPopper,
-          tooltipPlacementLeft: classes.bootstrapPlacementLeft,
-          tooltipPlacementRight: classes.bootstrapPlacementRight,
-          tooltipPlacementTop: classes.bootstrapPlacementTop,
-          tooltipPlacementBottom: classes.bootstrapPlacementBottom,
-        }}
-        PopperProps={{
-          popperOptions: {
-            modifiers: {
-              arrow: {
-                enabled: Boolean(arrowRef),
-                element: arrowRef,
-              },
+    <Tooltip
+      classes={classes}
+      PopperProps={{
+        popperOptions: {
+          modifiers: {
+            arrow: {
+              enabled: Boolean(arrowRef),
+              element: arrowRef,
             },
           },
-        }}
-      >
-        <Button className={classes.button}>Bootstrap</Button>
-      </Tooltip>
-      <Tooltip
-        classes={{
-          popper: classes.htmlPopper,
-          tooltip: classes.htmlTooltip,
-        }}
-        PopperProps={{
-          popperOptions: {
-            modifiers: {
-              arrow: {
-                enabled: Boolean(arrowRef),
-                element: arrowRef,
-              },
-            },
-          },
-        }}
+        },
+      }}
+      {...props}
+      title={
+        <React.Fragment>
+          {props.title}
+          <span className={arrow} ref={setArrowRef} />
+        </React.Fragment>
+      }
+    />
+  );
+}
+
+const HtmlTooltip = withStyles((theme: Theme) => ({
+  tooltip: {
+    backgroundColor: '#f5f5f9',
+    color: 'rgba(0, 0, 0, 0.87)',
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: '1px solid #dadde9',
+    '& b': {
+      fontWeight: theme.typography.fontWeightMedium,
+    },
+  },
+}))(Tooltip);
+
+function CustomizedTooltips() {
+  return (
+    <div>
+      <LightTooltip title="Add">
+        <Button>Light</Button>
+      </LightTooltip>
+      <ArrowTooltip title="Add">
+        <Button>Arrow</Button>
+      </ArrowTooltip>
+      <BootstrapTooltip title="Add">
+        <Button>Bootstrap</Button>
+      </BootstrapTooltip>
+      <HtmlTooltip
         title={
           <React.Fragment>
             <Typography color="inherit">Tooltip with HTML</Typography>
             <em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
             {"It's very engaging. Right?"}
-            <span className={classes.arrow} ref={setArrowRef} />
           </React.Fragment>
         }
       >
-        <Button className={classes.button}>HTML</Button>
-      </Tooltip>
+        <Button>HTML</Button>
+      </HtmlTooltip>
     </div>
   );
 }
diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js
index dfe05f2e10af03..75a5984c198fac 100644
--- a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js
+++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js
@@ -46,4 +46,4 @@ BreadcrumbCollapsed.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles, { name: 'MuiPrivateBreadcrumbCollapsed' })(BreadcrumbCollapsed);
+export default withStyles(styles, { name: 'PrivateBreadcrumbCollapsed' })(BreadcrumbCollapsed);
diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js
index 3d8fd090817f4a..a87d4d6924498d 100644
--- a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js
+++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js
@@ -27,4 +27,4 @@ BreadcrumbSeparator.propTypes = {
   className: PropTypes.string,
 };
 
-export default withStyles(styles, { name: 'MuiPrivateBreadcrumbSeparator' })(BreadcrumbSeparator);
+export default withStyles(styles, { name: 'PrivateBreadcrumbSeparator' })(BreadcrumbSeparator);
diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
index 0add2e7e3da364..2589ac46a5bbfc 100644
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -34,6 +34,18 @@ export const styles = theme => {
           display: 'none',
         },
       },
+      '&$expanded': {
+        margin: '16px 0',
+        '&:first-child': {
+          marginTop: 0,
+        },
+        '&:last-child': {
+          marginBottom: 0,
+        },
+        '&:before': {
+          opacity: 0,
+        },
+      },
       '&$expanded + &': {
         '&:before': {
           display: 'none',
@@ -58,18 +70,7 @@ export const styles = theme => {
       },
     },
     /* Styles applied to the root element if `expanded={true}`. */
-    expanded: {
-      margin: '16px 0',
-      '&:first-child': {
-        marginTop: 0,
-      },
-      '&:last-child': {
-        marginBottom: 0,
-      },
-      '&:before': {
-        opacity: 0,
-      },
-    },
+    expanded: {},
     /* Styles applied to the root element if `disabled={true}`. */
     disabled: {
       backgroundColor: theme.palette.action.disabledBackground,
diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js
index e2ded222517865..a42a838051e5f3 100644
--- a/packages/material-ui/src/Hidden/HiddenCss.js
+++ b/packages/material-ui/src/Hidden/HiddenCss.js
@@ -152,4 +152,4 @@ HiddenCss.propTypes = {
   xsUp: PropTypes.bool,
 };
 
-export default withStyles(styles, { name: 'MuiPrivateHiddenCss' })(HiddenCss);
+export default withStyles(styles, { name: 'PrivateHiddenCss' })(HiddenCss);
diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index 7b0139905c5bf9..52183011d9e845 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -118,6 +118,6 @@ NotchedOutline.propTypes = {
   theme: PropTypes.object,
 };
 
-export default withStyles(styles, { name: 'MuiPrivateNotchedOutline', withTheme: true })(
+export default withStyles(styles, { name: 'PrivateNotchedOutline', withTheme: true })(
   NotchedOutline,
 );
diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js
index 75635c6155b1b0..5baa0e74c6eb41 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js
@@ -70,4 +70,4 @@ SwipeArea.propTypes = {
   width: PropTypes.number.isRequired,
 };
 
-export default withStyles(styles, { name: 'MuiPrivateSwipeArea' })(SwipeArea);
+export default withStyles(styles, { name: 'PrivateSwipeArea' })(SwipeArea);
diff --git a/packages/material-ui/src/Tabs/TabIndicator.js b/packages/material-ui/src/Tabs/TabIndicator.js
index f8b0e260b60755..9d92a56e3316d2 100644
--- a/packages/material-ui/src/Tabs/TabIndicator.js
+++ b/packages/material-ui/src/Tabs/TabIndicator.js
@@ -55,4 +55,4 @@ TabIndicator.propTypes = {
   color: PropTypes.oneOf(['primary', 'secondary']),
 };
 
-export default withStyles(styles, { name: 'MuiPrivateTabIndicator' })(TabIndicator);
+export default withStyles(styles, { name: 'PrivateTabIndicator' })(TabIndicator);
diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js
index d033b478d8d222..1e489439a3996f 100644
--- a/packages/material-ui/src/Tabs/TabScrollButton.js
+++ b/packages/material-ui/src/Tabs/TabScrollButton.js
@@ -62,4 +62,4 @@ TabScrollButton.defaultProps = {
   visible: true,
 };
 
-export default withStyles(styles, { name: 'MuiPrivateTabScrollButton' })(TabScrollButton);
+export default withStyles(styles, { name: 'PrivateTabScrollButton' })(TabScrollButton);
diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
index a23f327ec1568e..2e9c5092e91713 100644
--- a/packages/material-ui/src/internal/SwitchBase.js
+++ b/packages/material-ui/src/internal/SwitchBase.js
@@ -236,6 +236,6 @@ SwitchBase.propTypes = {
   value: PropTypes.any,
 };
 
-export default withStyles(styles, { name: 'MuiPrivateSwitchBase' })(
+export default withStyles(styles, { name: 'PrivateSwitchBase' })(
   withFormControlContext(SwitchBase),
 );