diff --git a/benchmark/browser/scenarios/make-styles/index.js b/benchmark/browser/scenarios/make-styles/index.js
index 125ef635e122b7..8a21c749f7c666 100644
--- a/benchmark/browser/scenarios/make-styles/index.js
+++ b/benchmark/browser/scenarios/make-styles/index.js
@@ -1,21 +1,27 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 200,
-    height: 200,
-    borderWidth: 3,
-    borderColor: 'white',
-    '&:hover': {
-      backgroundColor: theme.palette.secondary.dark,
-    },
-    [theme.breakpoints.up('sm')]: {
-      backgroundColor: theme.palette.primary.main,
-      borderStyle: 'dashed',
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      width: 200,
+      height: 200,
+      borderWidth: 3,
+      borderColor: 'white',
+      '&:hover': {
+        backgroundColor: theme.palette.secondary.dark,
+      },
+      [theme.breakpoints.up('sm')]: {
+        backgroundColor: theme.palette.primary.main,
+        borderStyle: 'dashed',
+      },
     },
-  },
-}));
+  }),
+  { defaultTheme },
+);
 
 const Div = React.forwardRef(function Div(props, ref) {
   const classes = useStyles();
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index 7b20ca03015fe7..6d55b630b39402 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Typography, { TypographyProps } from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
 import Steps from 'docs/src/pages/landing/Steps';
@@ -32,82 +33,59 @@ function loadDependencies() {
   loadScript('https://platform.twitter.com/widgets.js', document.querySelector('head'));
 }
 
-const useStyles = makeStyles(
-  (theme) => ({
-    root: {
-      flex: '1 0 100%',
-    },
-    hero: {
-      paddingTop: theme.spacing(8),
-      color: theme.palette.primary.main,
-    },
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      textAlign: 'center',
-      paddingTop: theme.spacing(4),
-      paddingBottom: theme.spacing(8),
-      [theme.breakpoints.up('md')]: {
-        paddingTop: theme.spacing(16),
-        paddingBottom: theme.spacing(16),
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        textAlign: 'left',
-      },
-    },
-    title: {
-      marginLeft: -12,
-      whiteSpace: 'nowrap',
-      letterSpacing: '.7rem',
-      textIndent: '.7rem',
-      fontWeight: theme.typography.fontWeightLight,
-      [theme.breakpoints.only('xs')]: {
-        fontSize: 28,
-      },
-    },
-    logo: {
-      flexShrink: 0,
-      width: 120,
-      height: 120,
-      marginBottom: theme.spacing(2),
-      [theme.breakpoints.up('md')]: {
-        marginRight: theme.spacing(8),
-        width: 195,
-        height: 175,
-      },
-    },
-    button: {
-      marginTop: theme.spacing(4),
-    },
-    social: {
-      padding: theme.spacing(2, 0),
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      minHeight: 21,
-      boxSizing: 'content-box',
-      '& a': {
-        color: theme.palette.background.paper,
-      },
-    },
-    github: {
-      width: 105,
-      display: 'flex',
-      justifyContent: 'flex-end',
-      marginRight: theme.spacing(1),
-      '& span': {
-        display: 'flex',
-      },
-    },
-    twitter: {
-      width: 160,
-      display: 'flex',
+const Content = styled(Container)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+  paddingTop: theme.spacing(4),
+  paddingBottom: theme.spacing(8),
+  [theme.breakpoints.up('md')]: {
+    paddingTop: theme.spacing(16),
+    paddingBottom: theme.spacing(16),
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    textAlign: 'left',
+  },
+}));
+
+const Title = styled(Typography)<TypographyProps & { component?: React.ElementType }>(
+  ({ theme }) => ({
+    marginLeft: -12,
+    whiteSpace: 'nowrap',
+    letterSpacing: '.7rem',
+    textIndent: '.7rem',
+    fontWeight: theme.typography.fontWeightLight,
+    [theme.breakpoints.only('xs')]: {
+      fontSize: 28,
     },
   }),
-  { name: 'LandingPage' },
 );
 
+const Logo = styled('img')(({ theme }) => ({
+  flexShrink: 0,
+  width: 120,
+  height: 120,
+  marginBottom: theme.spacing(2),
+  [theme.breakpoints.up('md')]: {
+    marginRight: theme.spacing(8),
+    width: 195,
+    height: 175,
+  },
+}));
+
+const Social = styled('div')(({ theme }) => ({
+  padding: theme.spacing(2, 0),
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: 21,
+  boxSizing: 'content-box',
+  '& a': {
+    color: theme.palette.background.paper,
+  },
+}));
+
 interface LandingPageProps {
   sponsorsProps: {
     docs: object;
@@ -121,26 +99,19 @@ export default function LandingPage(props: LandingPageProps) {
     loadDependencies();
   }, []);
   const t = useTranslate();
-  const classes = useStyles();
 
   return (
     <AppFrame>
-      <div className={classes.root}>
+      <Box sx={{ flex: '1 0 100%' }}>
         <Head />
         <main id="main-content" tabIndex={-1}>
-          <div className={classes.hero}>
-            <Container maxWidth="md" className={classes.content}>
-              <img src="/static/logo_raw.svg" alt="" className={classes.logo} />
+          <Box sx={{ pt: 8, color: 'primary.main' }}>
+            <Content maxWidth="md">
+              <Logo src="/static/logo_raw.svg" alt="" />
               <div>
-                <Typography
-                  variant="h3"
-                  component="h1"
-                  color="inherit"
-                  gutterBottom
-                  className={classes.title}
-                >
+                <Title variant="h3" component="h1" color="inherit" gutterBottom>
                   {'MATERIAL-UI'}
-                </Typography>
+                </Title>
                 <Typography variant="h5" component="p" color="inherit">
                   {t('strapline')}
                 </Typography>
@@ -148,16 +119,24 @@ export default function LandingPage(props: LandingPageProps) {
                   component={Link}
                   noLinkStyle
                   href="/getting-started/installation"
-                  className={classes.button}
+                  sx={{ mt: 4 }}
                   variant="outlined"
                 >
                   {t('getStarted')}
                 </Button>
               </div>
-            </Container>
-          </div>
-          <div className={classes.social}>
-            <div className={classes.github}>
+            </Content>
+          </Box>
+          <Social>
+            <Box
+              sx={{
+                width: 105,
+                display: 'flex',
+                justifyContent: 'flex-end',
+                mr: 1,
+                '& span': { display: 'flex' },
+              }}
+            >
               <a
                 className="github-button"
                 href="https://github.com/mui-org/material-ui"
@@ -166,8 +145,8 @@ export default function LandingPage(props: LandingPageProps) {
               >
                 Star
               </a>
-            </div>
-            <div className={classes.twitter}>
+            </Box>
+            <Box sx={{ width: 160, display: 'flex' }}>
               <a
                 className="twitter-follow-button"
                 href="https://twitter.com/@materialui"
@@ -175,8 +154,8 @@ export default function LandingPage(props: LandingPageProps) {
               >
                 Follow
               </a>
-            </div>
-          </div>
+            </Box>
+          </Social>
           <Pro />
           <QuickWord />
           <Steps />
@@ -186,7 +165,7 @@ export default function LandingPage(props: LandingPageProps) {
           <Users />
         </main>
         <AppFooter />
-      </div>
+      </Box>
       <script
         type="application/ld+json"
         // eslint-disable-next-line react/no-danger
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 37f38766a99498..259285ca7e4fe5 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-// TODO: fix import, test:regressions is failing as there is no theme in the context
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme } from '@material-ui/core/styles';
 
 const styles = (theme) => ({
   root: {
@@ -207,7 +207,8 @@ const styles = (theme) => ({
     },
   },
 });
-const useStyles = makeStyles(styles, { name: 'MarkdownElement', flip: false });
+const defaultTheme = createTheme();
+const useStyles = makeStyles(styles, { name: 'MarkdownElement', flip: false, defaultTheme });
 
 const MarkdownElement = React.forwardRef(function MarkdownElement(props, ref) {
   const { className, renderedMarkdown, ...other } = props;
diff --git a/docs/src/pages/components/buttons/ButtonBase.js b/docs/src/pages/components/buttons/ButtonBase.js
index bb7b75e714ece6..03d7c079cabf51 100644
--- a/docs/src/pages/components/buttons/ButtonBase.js
+++ b/docs/src/pages/components/buttons/ButtonBase.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Typography from '@material-ui/core/Typography';
 
@@ -21,116 +22,101 @@ const images = [
   },
 ];
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    minWidth: 300,
-    width: '100%',
+const ImageButton = styled(ButtonBase)(({ theme }) => ({
+  position: 'relative',
+  height: 200,
+  [theme.breakpoints.down('sm')]: {
+    width: '100% !important', // Overrides inline-style
+    height: 100,
   },
-  image: {
-    position: 'relative',
-    height: 200,
-    [theme.breakpoints.down('sm')]: {
-      width: '100% !important', // Overrides inline-style
-      height: 100,
+  '&:hover, &.Mui-focusVisible': {
+    zIndex: 1,
+    '& .MuiImageBackdrop-root': {
+      opacity: 0.15,
     },
-    '&:hover, &$focusVisible': {
-      zIndex: 1,
-      '& $imageBackdrop': {
-        opacity: 0.15,
-      },
-      '& $imageMarked': {
-        opacity: 0,
-      },
-      '& $imageTitle': {
-        border: '4px solid currentColor',
-      },
+    '& .MuiImageMarked-root': {
+      opacity: 0,
+    },
+    '& .MuiTypography-root': {
+      border: '4px solid currentColor',
     },
-  },
-  focusVisible: {},
-  imageButton: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: theme.palette.common.white,
-  },
-  imageSrc: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center 40%',
-  },
-  imageBackdrop: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: theme.palette.common.black,
-    opacity: 0.4,
-    transition: theme.transitions.create('opacity'),
-  },
-  imageTitle: {
-    position: 'relative',
-    padding: `${theme.spacing(2)} ${theme.spacing(4)} calc(${theme.spacing(
-      1,
-    )} + 6px)`,
-  },
-  imageMarked: {
-    height: 3,
-    width: 18,
-    backgroundColor: theme.palette.common.white,
-    position: 'absolute',
-    bottom: -2,
-    left: 'calc(50% - 9px)',
-    transition: theme.transitions.create('opacity'),
   },
 }));
 
-export default function ButtonBases() {
-  const classes = useStyles();
+const ImageSrc = styled('span')({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center 40%',
+});
 
+const Image = styled('span')(({ theme }) => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: theme.palette.common.white,
+}));
+
+const ImageBackdrop = styled('span')(({ theme }) => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundColor: theme.palette.common.black,
+  opacity: 0.4,
+  transition: theme.transitions.create('opacity'),
+}));
+
+const ImageMarked = styled('span')(({ theme }) => ({
+  height: 3,
+  width: 18,
+  backgroundColor: theme.palette.common.white,
+  position: 'absolute',
+  bottom: -2,
+  left: 'calc(50% - 9px)',
+  transition: theme.transitions.create('opacity'),
+}));
+
+export default function ButtonBases() {
   return (
-    <div className={classes.root}>
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', minWidth: 300, width: '100%' }}>
       {images.map((image) => (
-        <ButtonBase
+        <ImageButton
           focusRipple
           key={image.title}
-          className={classes.image}
-          focusVisibleClassName={classes.focusVisible}
           style={{
             width: image.width,
           }}
         >
-          <span
-            className={classes.imageSrc}
-            style={{
-              backgroundImage: `url(${image.url})`,
-            }}
-          />
-          <span className={classes.imageBackdrop} />
-          <span className={classes.imageButton}>
+          <ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
+          <ImageBackdrop className="MuiImageBackdrop-root" />
+          <Image>
             <Typography
               component="span"
               variant="subtitle1"
               color="inherit"
-              className={classes.imageTitle}
+              sx={{
+                position: 'relative',
+                p: 4,
+                pt: 2,
+                pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+              }}
             >
               {image.title}
-              <span className={classes.imageMarked} />
+              <ImageMarked className="MuiImageMarked-root" />
             </Typography>
-          </span>
-        </ButtonBase>
+          </Image>
+        </ImageButton>
       ))}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/buttons/ButtonBase.tsx b/docs/src/pages/components/buttons/ButtonBase.tsx
index fbacf5510fcea1..03d7c079cabf51 100644
--- a/docs/src/pages/components/buttons/ButtonBase.tsx
+++ b/docs/src/pages/components/buttons/ButtonBase.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Theme, makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import Typography from '@material-ui/core/Typography';
 
@@ -21,116 +22,101 @@ const images = [
   },
 ];
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    minWidth: 300,
-    width: '100%',
+const ImageButton = styled(ButtonBase)(({ theme }) => ({
+  position: 'relative',
+  height: 200,
+  [theme.breakpoints.down('sm')]: {
+    width: '100% !important', // Overrides inline-style
+    height: 100,
   },
-  image: {
-    position: 'relative',
-    height: 200,
-    [theme.breakpoints.down('sm')]: {
-      width: '100% !important', // Overrides inline-style
-      height: 100,
+  '&:hover, &.Mui-focusVisible': {
+    zIndex: 1,
+    '& .MuiImageBackdrop-root': {
+      opacity: 0.15,
     },
-    '&:hover, &$focusVisible': {
-      zIndex: 1,
-      '& $imageBackdrop': {
-        opacity: 0.15,
-      },
-      '& $imageMarked': {
-        opacity: 0,
-      },
-      '& $imageTitle': {
-        border: '4px solid currentColor',
-      },
+    '& .MuiImageMarked-root': {
+      opacity: 0,
+    },
+    '& .MuiTypography-root': {
+      border: '4px solid currentColor',
     },
-  },
-  focusVisible: {},
-  imageButton: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: theme.palette.common.white,
-  },
-  imageSrc: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center 40%',
-  },
-  imageBackdrop: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: theme.palette.common.black,
-    opacity: 0.4,
-    transition: theme.transitions.create('opacity'),
-  },
-  imageTitle: {
-    position: 'relative',
-    padding: `${theme.spacing(2)} ${theme.spacing(4)} calc(${theme.spacing(
-      1,
-    )} + 6px)`,
-  },
-  imageMarked: {
-    height: 3,
-    width: 18,
-    backgroundColor: theme.palette.common.white,
-    position: 'absolute',
-    bottom: -2,
-    left: 'calc(50% - 9px)',
-    transition: theme.transitions.create('opacity'),
   },
 }));
 
-export default function ButtonBases() {
-  const classes = useStyles();
+const ImageSrc = styled('span')({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center 40%',
+});
 
+const Image = styled('span')(({ theme }) => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: theme.palette.common.white,
+}));
+
+const ImageBackdrop = styled('span')(({ theme }) => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundColor: theme.palette.common.black,
+  opacity: 0.4,
+  transition: theme.transitions.create('opacity'),
+}));
+
+const ImageMarked = styled('span')(({ theme }) => ({
+  height: 3,
+  width: 18,
+  backgroundColor: theme.palette.common.white,
+  position: 'absolute',
+  bottom: -2,
+  left: 'calc(50% - 9px)',
+  transition: theme.transitions.create('opacity'),
+}));
+
+export default function ButtonBases() {
   return (
-    <div className={classes.root}>
+    <Box sx={{ display: 'flex', flexWrap: 'wrap', minWidth: 300, width: '100%' }}>
       {images.map((image) => (
-        <ButtonBase
+        <ImageButton
           focusRipple
           key={image.title}
-          className={classes.image}
-          focusVisibleClassName={classes.focusVisible}
           style={{
             width: image.width,
           }}
         >
-          <span
-            className={classes.imageSrc}
-            style={{
-              backgroundImage: `url(${image.url})`,
-            }}
-          />
-          <span className={classes.imageBackdrop} />
-          <span className={classes.imageButton}>
+          <ImageSrc style={{ backgroundImage: `url(${image.url})` }} />
+          <ImageBackdrop className="MuiImageBackdrop-root" />
+          <Image>
             <Typography
               component="span"
               variant="subtitle1"
               color="inherit"
-              className={classes.imageTitle}
+              sx={{
+                position: 'relative',
+                p: 4,
+                pt: 2,
+                pb: (theme) => `calc(${theme.spacing(1)} + 6px)`,
+              }}
             >
               {image.title}
-              <span className={classes.imageMarked} />
+              <ImageMarked className="MuiImageMarked-root" />
             </Typography>
-          </span>
-        </ButtonBase>
+          </Image>
+        </ImageButton>
       ))}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/date-picker/CustomDay.js b/docs/src/pages/components/date-picker/CustomDay.js
index 4bf6ead5ee5b82..6e060a5a8c54b6 100644
--- a/docs/src/pages/components/date-picker/CustomDay.js
+++ b/docs/src/pages/components/date-picker/CustomDay.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
 import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
@@ -11,24 +12,29 @@ import isSameDay from 'date-fns/isSameDay';
 import isWithinInterval from 'date-fns/isWithinInterval';
 import startOfWeek from 'date-fns/startOfWeek';
 
-const useStyles = makeStyles((theme) => ({
-  highlight: {
-    borderRadius: 0,
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.common.white,
-    '&:hover, &:focus': {
-      backgroundColor: theme.palette.primary.dark,
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme) => ({
+    highlight: {
+      borderRadius: 0,
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.common.white,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    },
+    firstHighlight: {
+      borderTopLeftRadius: '50%',
+      borderBottomLeftRadius: '50%',
+    },
+    endHighlight: {
+      borderTopRightRadius: '50%',
+      borderBottomRightRadius: '50%',
     },
-  },
-  firstHighlight: {
-    borderTopLeftRadius: '50%',
-    borderBottomLeftRadius: '50%',
-  },
-  endHighlight: {
-    borderTopRightRadius: '50%',
-    borderBottomRightRadius: '50%',
-  },
-}));
+  }),
+  { defaultTheme },
+);
 
 export default function CustomDay() {
   const classes = useStyles();
diff --git a/docs/src/pages/components/date-picker/CustomDay.tsx b/docs/src/pages/components/date-picker/CustomDay.tsx
index beb01bd45daa37..88e499b757bcb2 100644
--- a/docs/src/pages/components/date-picker/CustomDay.tsx
+++ b/docs/src/pages/components/date-picker/CustomDay.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { Theme, createTheme } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
 import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
@@ -11,24 +12,29 @@ import isSameDay from 'date-fns/isSameDay';
 import isWithinInterval from 'date-fns/isWithinInterval';
 import startOfWeek from 'date-fns/startOfWeek';
 
-const useStyles = makeStyles((theme) => ({
-  highlight: {
-    borderRadius: 0,
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.common.white,
-    '&:hover, &:focus': {
-      backgroundColor: theme.palette.primary.dark,
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    highlight: {
+      borderRadius: 0,
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.common.white,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    },
+    firstHighlight: {
+      borderTopLeftRadius: '50%',
+      borderBottomLeftRadius: '50%',
+    },
+    endHighlight: {
+      borderTopRightRadius: '50%',
+      borderBottomRightRadius: '50%',
     },
-  },
-  firstHighlight: {
-    borderTopLeftRadius: '50%',
-    borderBottomLeftRadius: '50%',
-  },
-  endHighlight: {
-    borderTopRightRadius: '50%',
-    borderBottomRightRadius: '50%',
-  },
-}));
+  }),
+  { defaultTheme },
+);
 
 export default function CustomDay() {
   const classes = useStyles();
diff --git a/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.js b/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.js
index 2a5a1ac62d5c3c..45cd10cf0579c9 100644
--- a/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.js
+++ b/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { createTheme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
@@ -9,24 +10,29 @@ import StaticDateRangePicker from '@material-ui/lab/StaticDateRangePicker';
 import DateRangePickerDay from '@material-ui/lab/DateRangePickerDay';
 import clsx from 'clsx';
 
-const useStyles = makeStyles((theme) => ({
-  highlight: {
-    borderRadius: 0,
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.common.white,
-    '&:hover, &:focus': {
-      backgroundColor: theme.palette.primary.dark,
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme) => ({
+    highlight: {
+      borderRadius: 0,
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.common.white,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    },
+    firstHighlight: {
+      borderTopLeftRadius: '50%',
+      borderBottomLeftRadius: '50%',
+    },
+    endHighlight: {
+      borderTopRightRadius: '50%',
+      borderBottomRightRadius: '50%',
     },
-  },
-  firstHighlight: {
-    borderTopLeftRadius: '50%',
-    borderBottomLeftRadius: '50%',
-  },
-  endHighlight: {
-    borderTopRightRadius: '50%',
-    borderBottomRightRadius: '50%',
-  },
-}));
+  }),
+  { defaultTheme },
+);
 
 export default function CustomDateRangePickerDay() {
   const classes = useStyles();
diff --git a/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.tsx b/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.tsx
index af59d49feae427..a4850c27a2deee 100644
--- a/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.tsx
+++ b/docs/src/pages/components/date-range-picker/CustomDateRangePickerDay.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { createTheme, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
@@ -11,24 +12,29 @@ import DateRangePickerDay, {
 } from '@material-ui/lab/DateRangePickerDay';
 import clsx from 'clsx';
 
-const useStyles = makeStyles((theme) => ({
-  highlight: {
-    borderRadius: 0,
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.common.white,
-    '&:hover, &:focus': {
-      backgroundColor: theme.palette.primary.dark,
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    highlight: {
+      borderRadius: 0,
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.common.white,
+      '&:hover, &:focus': {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    },
+    firstHighlight: {
+      borderTopLeftRadius: '50%',
+      borderBottomLeftRadius: '50%',
+    },
+    endHighlight: {
+      borderTopRightRadius: '50%',
+      borderBottomRightRadius: '50%',
     },
-  },
-  firstHighlight: {
-    borderTopLeftRadius: '50%',
-    borderBottomLeftRadius: '50%',
-  },
-  endHighlight: {
-    borderTopRightRadius: '50%',
-    borderBottomRightRadius: '50%',
-  },
-}));
+  }),
+  { defaultTheme },
+);
 
 export default function CustomDateRangePickerDay() {
   const classes = useStyles();
diff --git a/docs/src/pages/components/dividers/DividerText.js b/docs/src/pages/components/dividers/DividerText.js
index e9e8983d0fa825..55a477b725e0ac 100644
--- a/docs/src/pages/components/dividers/DividerText.js
+++ b/docs/src/pages/components/dividers/DividerText.js
@@ -1,20 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Divider from '@material-ui/core/Divider';
 import Chip from '@material-ui/core/Chip';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    ...theme.typography.body2,
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
+const Root = styled('div')(({ theme }) => ({
+  width: '100%',
+  ...theme.typography.body2,
+  '& > :not(style) + :not(style)': {
+    marginTop: theme.spacing(2),
   },
 }));
 
 export default function DividerText() {
-  const classes = useStyles();
   const content = (
     <div>
       {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
@@ -24,7 +21,7 @@ export default function DividerText() {
   );
 
   return (
-    <div className={classes.root}>
+    <Root>
       {content}
       <Divider>CENTER</Divider>
       {content}
@@ -36,6 +33,6 @@ export default function DividerText() {
         <Chip label="CHIP" />
       </Divider>
       {content}
-    </div>
+    </Root>
   );
 }
diff --git a/docs/src/pages/components/dividers/DividerText.tsx b/docs/src/pages/components/dividers/DividerText.tsx
index 3782ca9571f4a5..55a477b725e0ac 100644
--- a/docs/src/pages/components/dividers/DividerText.tsx
+++ b/docs/src/pages/components/dividers/DividerText.tsx
@@ -1,20 +1,17 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Divider from '@material-ui/core/Divider';
 import Chip from '@material-ui/core/Chip';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: '100%',
-    ...theme.typography.body2,
-    '& > * + *': {
-      marginTop: theme.spacing(2),
-    },
+const Root = styled('div')(({ theme }) => ({
+  width: '100%',
+  ...theme.typography.body2,
+  '& > :not(style) + :not(style)': {
+    marginTop: theme.spacing(2),
   },
 }));
 
 export default function DividerText() {
-  const classes = useStyles();
   const content = (
     <div>
       {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
@@ -24,7 +21,7 @@ export default function DividerText() {
   );
 
   return (
-    <div className={classes.root}>
+    <Root>
       {content}
       <Divider>CENTER</Divider>
       {content}
@@ -36,6 +33,6 @@ export default function DividerText() {
         <Chip label="CHIP" />
       </Divider>
       {content}
-    </div>
+    </Root>
   );
 }
diff --git a/docs/src/pages/components/dividers/VerticalDividerText.js b/docs/src/pages/components/dividers/VerticalDividerText.js
index f6d41bf1f60501..2f42b33bac49a8 100644
--- a/docs/src/pages/components/dividers/VerticalDividerText.js
+++ b/docs/src/pages/components/dividers/VerticalDividerText.js
@@ -1,20 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import MuiGrid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    ...theme.typography.body2,
-    '& [role="separator"]': {
-      margin: theme.spacing(0, 2),
-    },
+const Grid = styled(MuiGrid)(({ theme }) => ({
+  width: '100%',
+  ...theme.typography.body2,
+  '& [role="separator"]': {
+    margin: theme.spacing(0, 2),
   },
 }));
 
 export default function VerticalDividerText() {
-  const classes = useStyles();
   const content = (
     <div>
       {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
@@ -24,7 +21,7 @@ export default function VerticalDividerText() {
   );
 
   return (
-    <Grid container className={classes.root}>
+    <Grid container>
       <Grid item xs>
         {content}
       </Grid>
diff --git a/docs/src/pages/components/dividers/VerticalDividerText.tsx b/docs/src/pages/components/dividers/VerticalDividerText.tsx
index e0734a6e22fee7..2f42b33bac49a8 100644
--- a/docs/src/pages/components/dividers/VerticalDividerText.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividerText.tsx
@@ -1,20 +1,17 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import MuiGrid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: '100%',
-    ...theme.typography.body2,
-    '& [role="separator"]': {
-      margin: theme.spacing(0, 2),
-    },
+const Grid = styled(MuiGrid)(({ theme }) => ({
+  width: '100%',
+  ...theme.typography.body2,
+  '& [role="separator"]': {
+    margin: theme.spacing(0, 2),
   },
 }));
 
 export default function VerticalDividerText() {
-  const classes = useStyles();
   const content = (
     <div>
       {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo.
@@ -24,7 +21,7 @@ export default function VerticalDividerText() {
   );
 
   return (
-    <Grid container className={classes.root}>
+    <Grid container>
       <Grid item xs>
         {content}
       </Grid>
diff --git a/docs/src/pages/components/material-icons/SearchIcons.js b/docs/src/pages/components/material-icons/SearchIcons.js
index 0c803fa2dfffeb..68cdd32b06d0b4 100644
--- a/docs/src/pages/components/material-icons/SearchIcons.js
+++ b/docs/src/pages/components/material-icons/SearchIcons.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import copy from 'clipboard-copy';
 import clsx from 'clsx';
@@ -82,6 +83,8 @@ if (process.env.NODE_ENV !== 'production') {
 //   DeleteForeverSharp,
 // };
 
+const defaultTheme = createTheme();
+
 function selectNode(node) {
   // Clear any current selection
   const selection = window.getSelection();
@@ -150,79 +153,82 @@ Icons.propTypes = {
 };
 Icons = React.memo(Icons);
 
-const useDialogStyles = makeStyles((theme) => ({
-  title: {
-    display: 'inline-block',
-    cursor: 'pointer',
-    transition: theme.transitions.create('background-color', {
-      duration: theme.transitions.duration.shortest,
-    }),
-    '&:hover': {
-      backgroundColor: '#96c6fd80',
-    },
-  },
-  markdown: {
-    cursor: 'pointer',
-    transition: theme.transitions.create('background-color', {
-      duration: theme.transitions.duration.shortest,
-    }),
-    '&:hover': {
-      '& code': {
+const useDialogStyles = makeStyles(
+  (theme) => ({
+    title: {
+      display: 'inline-block',
+      cursor: 'pointer',
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shortest,
+      }),
+      '&:hover': {
         backgroundColor: '#96c6fd80',
       },
     },
-    '& pre': {
-      borderRadius: 0,
-      margin: 0,
+    markdown: {
+      cursor: 'pointer',
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shortest,
+      }),
+      '&:hover': {
+        '& code': {
+          backgroundColor: '#96c6fd80',
+        },
+      },
+      '& pre': {
+        borderRadius: 0,
+        margin: 0,
+      },
+    },
+    import: {
+      textAlign: 'right',
+      padding: theme.spacing(0.5, 1),
+    },
+    canvas: {
+      fontSize: 210,
+      marginTop: theme.spacing(2),
+      color: theme.palette.text.primary,
+      backgroundSize: '30px 30px',
+      backgroundColor: 'transparent',
+      backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0',
+      backgroundImage:
+        theme.palette.mode === 'light'
+          ? 'linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%)'
+          : 'linear-gradient(45deg, #595959 25%, transparent 25%), linear-gradient(-45deg, #595959 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #595959 75%), linear-gradient(-45deg, transparent 75%, #595959 75%)',
+    },
+    fontSize: {
+      margin: theme.spacing(2),
+    },
+    context: {
+      margin: theme.spacing(0.5),
+      padding: theme.spacing(1, 2),
+      borderRadius: theme.shape.borderRadius,
+      boxSizing: 'content-box',
+    },
+    contextPrimary: {
+      color: theme.palette.primary.main,
+    },
+    contextPrimaryInverse: {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main,
+    },
+    contextTextPrimary: {
+      color: theme.palette.text.primary,
     },
-  },
-  import: {
-    textAlign: 'right',
-    padding: theme.spacing(0.5, 1),
-  },
-  canvas: {
-    fontSize: 210,
-    marginTop: theme.spacing(2),
-    color: theme.palette.text.primary,
-    backgroundSize: '30px 30px',
-    backgroundColor: 'transparent',
-    backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0',
-    backgroundImage:
-      theme.palette.mode === 'light'
-        ? 'linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, transparent 75%, #e6e6e6 75%)'
-        : 'linear-gradient(45deg, #595959 25%, transparent 25%), linear-gradient(-45deg, #595959 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #595959 75%), linear-gradient(-45deg, transparent 75%, #595959 75%)',
-  },
-  fontSize: {
-    margin: theme.spacing(2),
-  },
-  context: {
-    margin: theme.spacing(0.5),
-    padding: theme.spacing(1, 2),
-    borderRadius: theme.shape.borderRadius,
-    boxSizing: 'content-box',
-  },
-  contextPrimary: {
-    color: theme.palette.primary.main,
-  },
-  contextPrimaryInverse: {
-    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.main,
-  },
-  contextTextPrimary: {
-    color: theme.palette.text.primary,
-  },
-  contextTextPrimaryInverse: {
-    color: theme.palette.background.paper,
-    backgroundColor: theme.palette.text.primary,
-  },
-  contextTextSecondary: {
-    color: theme.palette.text.secondary,
-  },
-  contextTextSecondaryInverse: {
-    color: theme.palette.background.paper,
-    backgroundColor: theme.palette.text.secondary,
-  },
-}));
+    contextTextPrimaryInverse: {
+      color: theme.palette.background.paper,
+      backgroundColor: theme.palette.text.primary,
+    },
+    contextTextSecondary: {
+      color: theme.palette.text.secondary,
+    },
+    contextTextSecondaryInverse: {
+      color: theme.palette.background.paper,
+      backgroundColor: theme.palette.text.secondary,
+    },
+  }),
+  { defaultTheme },
+);
 
 let DialogDetails = (props) => {
   const classes = useDialogStyles();
@@ -383,65 +389,68 @@ DialogDetails.propTypes = {
 };
 DialogDetails = React.memo(DialogDetails);
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    minHeight: 500,
-  },
-  form: {
-    margin: theme.spacing(2, 0),
-  },
-  paper: {
-    position: 'sticky',
-    top: 80,
-    padding: '2px 4px',
-    display: 'flex',
-    alignItems: 'center',
-    marginBottom: theme.spacing(2),
-    width: '100%',
-  },
-  input: {
-    marginLeft: 8,
-    flex: 1,
-  },
-  iconButton: {
-    padding: 10,
-  },
-  icon: {
-    display: 'inline-block',
-    width: 86,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    textAlign: 'center',
-    color: theme.palette.text.secondary,
-    margin: '0 4px',
-    fontSize: 12,
-    '& p': {
-      margin: 0,
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      minHeight: 500,
+    },
+    form: {
+      margin: theme.spacing(2, 0),
+    },
+    paper: {
+      position: 'sticky',
+      top: 80,
+      padding: '2px 4px',
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: theme.spacing(2),
+      width: '100%',
+    },
+    input: {
+      marginLeft: 8,
+      flex: 1,
+    },
+    iconButton: {
+      padding: 10,
+    },
+    icon: {
+      display: 'inline-block',
+      width: 86,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
+      textAlign: 'center',
+      color: theme.palette.text.secondary,
+      margin: '0 4px',
+      fontSize: 12,
+      '& p': {
+        margin: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+    },
+    iconSvg: {
+      boxSizing: 'content-box',
+      cursor: 'pointer',
+      color: theme.palette.text.primary,
+      borderRadius: theme.shape.borderRadius,
+      transition: theme.transitions.create(['background-color', 'box-shadow'], {
+        duration: theme.transitions.duration.shortest,
+      }),
+      fontSize: 40,
+      padding: theme.spacing(2),
+      margin: theme.spacing(0.5, 0),
+      '&:hover': {
+        backgroundColor: theme.palette.background.paper,
+        boxShadow: theme.shadows[1],
+      },
     },
-  },
-  iconSvg: {
-    boxSizing: 'content-box',
-    cursor: 'pointer',
-    color: theme.palette.text.primary,
-    borderRadius: theme.shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow'], {
-      duration: theme.transitions.duration.shortest,
-    }),
-    fontSize: 40,
-    padding: theme.spacing(2),
-    margin: theme.spacing(0.5, 0),
-    '&:hover': {
-      backgroundColor: theme.palette.background.paper,
-      boxShadow: theme.shadows[1],
+    results: {
+      marginBottom: theme.spacing(1),
     },
-  },
-  results: {
-    marginBottom: theme.spacing(1),
-  },
-}));
+  }),
+  { defaultTheme },
+);
 
 const searchIndex = FlexSearch.create({
   async: true,
diff --git a/docs/src/pages/components/popper/ScrollPlayground.js b/docs/src/pages/components/popper/ScrollPlayground.js
index 61f444e1e7beca..e6767e4398958d 100644
--- a/docs/src/pages/components/popper/ScrollPlayground.js
+++ b/docs/src/pages/components/popper/ScrollPlayground.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Grid from '@material-ui/core/Grid';
@@ -15,92 +16,97 @@ import Switch from '@material-ui/core/Switch';
 import TextField from '@material-ui/core/TextField';
 import FormGroup from '@material-ui/core/FormGroup';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  scrollContainer: {
-    height: 400,
-    overflow: 'auto',
-    marginBottom: theme.spacing(3),
-  },
-  scroll: {
-    position: 'relative',
-    width: '230%',
-    backgroundColor: theme.palette.background.paper,
-    height: '230%',
-  },
-  legend: {
-    marginTop: theme.spacing(2),
-    maxWidth: 300,
-  },
-  paper: {
-    maxWidth: 400,
-    overflow: 'auto',
-  },
-  select: {
-    width: 200,
-  },
-  popper: {
-    zIndex: 1,
-    '&[data-popper-placement*="bottom"] $arrow': {
-      top: 0,
-      left: 0,
-      marginTop: '-0.9em',
-      width: '3em',
-      height: '1em',
-      '&::before': {
-        borderWidth: '0 1em 1em 1em',
-        borderColor: `transparent transparent ${theme.palette.background.paper} transparent`,
-      },
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      flexGrow: 1,
     },
-    '&[data-popper-placement*="top"] $arrow': {
-      bottom: 0,
-      left: 0,
-      marginBottom: '-0.9em',
-      width: '3em',
-      height: '1em',
-      '&::before': {
-        borderWidth: '1em 1em 0 1em',
-        borderColor: `${theme.palette.background.paper} transparent transparent transparent`,
-      },
+    scrollContainer: {
+      height: 400,
+      overflow: 'auto',
+      marginBottom: theme.spacing(3),
     },
-    '&[data-popper-placement*="right"] $arrow': {
-      left: 0,
-      marginLeft: '-0.9em',
-      height: '3em',
-      width: '1em',
-      '&::before': {
-        borderWidth: '1em 1em 1em 0',
-        borderColor: `transparent ${theme.palette.background.paper} transparent transparent`,
+    scroll: {
+      position: 'relative',
+      width: '230%',
+      backgroundColor: theme.palette.background.paper,
+      height: '230%',
+    },
+    legend: {
+      marginTop: theme.spacing(2),
+      maxWidth: 300,
+    },
+    paper: {
+      maxWidth: 400,
+      overflow: 'auto',
+    },
+    select: {
+      width: 200,
+    },
+    popper: {
+      zIndex: 1,
+      '&[data-popper-placement*="bottom"] $arrow': {
+        top: 0,
+        left: 0,
+        marginTop: '-0.9em',
+        width: '3em',
+        height: '1em',
+        '&::before': {
+          borderWidth: '0 1em 1em 1em',
+          borderColor: `transparent transparent ${theme.palette.background.paper} transparent`,
+        },
+      },
+      '&[data-popper-placement*="top"] $arrow': {
+        bottom: 0,
+        left: 0,
+        marginBottom: '-0.9em',
+        width: '3em',
+        height: '1em',
+        '&::before': {
+          borderWidth: '1em 1em 0 1em',
+          borderColor: `${theme.palette.background.paper} transparent transparent transparent`,
+        },
+      },
+      '&[data-popper-placement*="right"] $arrow': {
+        left: 0,
+        marginLeft: '-0.9em',
+        height: '3em',
+        width: '1em',
+        '&::before': {
+          borderWidth: '1em 1em 1em 0',
+          borderColor: `transparent ${theme.palette.background.paper} transparent transparent`,
+        },
+      },
+      '&[data-popper-placement*="left"] $arrow': {
+        right: 0,
+        marginRight: '-0.9em',
+        height: '3em',
+        width: '1em',
+        '&::before': {
+          borderWidth: '1em 0 1em 1em',
+          borderColor: `transparent transparent transparent ${theme.palette.background.paper}`,
+        },
       },
     },
-    '&[data-popper-placement*="left"] $arrow': {
-      right: 0,
-      marginRight: '-0.9em',
+    arrow: {
+      position: 'absolute',
+      fontSize: 7,
+      width: '3em',
       height: '3em',
-      width: '1em',
       '&::before': {
-        borderWidth: '1em 0 1em 1em',
-        borderColor: `transparent transparent transparent ${theme.palette.background.paper}`,
+        content: '""',
+        margin: 'auto',
+        display: 'block',
+        width: 0,
+        height: 0,
+        borderStyle: 'solid',
       },
     },
-  },
-  arrow: {
-    position: 'absolute',
-    fontSize: 7,
-    width: '3em',
-    height: '3em',
-    '&::before': {
-      content: '""',
-      margin: 'auto',
-      display: 'block',
-      width: 0,
-      height: 0,
-      borderStyle: 'solid',
-    },
-  },
-}));
+  }),
+  { defaultTheme },
+);
 
 export default function ScrollPlayground() {
   const anchorRef = React.useRef(null);
diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index 7e605a2df0cc2b..84d15bb2706bf0 100644
--- a/docs/src/pages/customization/default-theme/DefaultTheme.js
+++ b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import url from 'url';
+import Box from '@material-ui/core/Box';
 import ExpandIcon from '@material-ui/icons/ExpandMore';
 import CollapseIcon from '@material-ui/icons/ChevronRight';
 import TreeView from '@material-ui/lab/TreeView';
-import TreeItem from '@material-ui/lab/TreeItem';
+import MuiTreeItem, { treeItemClasses } from '@material-ui/lab/TreeItem';
 import clsx from 'clsx';
 import {
-  makeStyles,
-  withStyles,
+  experimentalStyled as styled,
   createTheme,
   lighten,
 } from '@material-ui/core/styles';
@@ -75,21 +75,14 @@ function getTokenType(type) {
   }
 }
 
-const useObjectEntryLabelStyles = makeStyles((theme) => ({
-  color: {
-    backgroundColor: '#fff',
-    display: 'inline-block',
-    marginBottom: -1,
-    marginRight: theme.spacing(0.5),
-    border: '1px solid',
-    backgroundImage:
-      'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.2%22%2F%3E%3C%2Fsvg%3E")',
-  },
-  colorInner: {
-    display: 'block',
-    width: 11,
-    height: 11,
-  },
+const Color = styled('span')(({ theme }) => ({
+  backgroundColor: '#fff',
+  display: 'inline-block',
+  marginBottom: -1,
+  marginRight: theme.spacing(0.5),
+  border: '1px solid',
+  backgroundImage:
+    'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202%202%22%3E%3Cpath%20d%3D%22M1%202V0h1v1H0v1z%22%20fill-opacity%3D%22.2%22%2F%3E%3C%2Fsvg%3E")',
 }));
 
 function ObjectEntryLabel(props) {
@@ -97,15 +90,18 @@ function ObjectEntryLabel(props) {
   const type = getType(objectValue);
   const label = getLabel(objectValue, type);
   const tokenType = getTokenType(type);
-  const classes = useObjectEntryLabelStyles();
 
   return (
     <React.Fragment>
       {`${objectKey}: `}
       {type === 'color' ? (
-        <span className={classes.color} style={{ borderColor: lighten(label, 0.7) }}>
-          <span className={classes.colorInner} style={{ backgroundColor: label }} />
-        </span>
+        <Color style={{ borderColor: lighten(label, 0.7) }}>
+          <Box
+            component="span"
+            sx={{ display: 'block', width: 11, height: 11 }}
+            style={{ backgroundColor: label }}
+          />
+        </Color>
       ) : null}
       <span className={clsx('token', tokenType)}>{label}</span>
     </React.Fragment>
@@ -117,14 +113,12 @@ ObjectEntryLabel.propTypes = {
   objectValue: PropTypes.any,
 };
 
-const useObjectEntryStyles = makeStyles({
-  treeItem: {
-    '&:focus > $treeItemContent': {
-      backgroundColor: lighten('#333', 0.08),
-      outline: `2px dashed ${lighten('#333', 0.3)}`,
-    },
+const TreeItem = styled(MuiTreeItem)({
+  [`&:focus > .${treeItemClasses.content}`]: {
+    backgroundColor: lighten('#333', 0.08),
+    outline: `2px dashed ${lighten('#333', 0.3)}`,
   },
-  treeItemContent: {
+  [`& .${treeItemClasses.content}`]: {
     '&:hover': {
       backgroundColor: lighten('#333', 0.08),
     },
@@ -155,14 +149,8 @@ function ObjectEntry(props) {
           });
   }
 
-  const classes = useObjectEntryStyles();
-
   return (
     <TreeItem
-      classes={{
-        root: classes.treeItem,
-        content: classes.treeItemContent,
-      }}
       nodeId={nodeId}
       label={<ObjectEntryLabel objectKey={objectKey} objectValue={objectValue} />}
     >
@@ -190,6 +178,7 @@ function Inspector(props) {
 
   return (
     <TreeView
+      sx={{ bgcolor: '#333', color: '#fff', borderRadius: 1, p: 1 }}
       key={key}
       defaultCollapseIcon={<ExpandIcon />}
       defaultEndIcon={<div style={{ width: 24 }} />}
@@ -216,21 +205,6 @@ Inspector.propTypes = {
   expandPaths: PropTypes.arrayOf(PropTypes.string),
 };
 
-const styles = (theme) => ({
-  root: {
-    width: '100%',
-  },
-  inspector: {
-    backgroundColor: '#333',
-    color: '#fff',
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(1),
-  },
-  switch: {
-    paddingBottom: theme.spacing(1),
-  },
-});
-
 function computeNodeIds(object, prefix) {
   if (
     (object !== null && typeof object === 'object') ||
@@ -261,8 +235,7 @@ function useNodeIdsLazy(object) {
   return allNodeIds;
 }
 
-function DefaultTheme(props) {
-  const { classes } = props;
+function DefaultTheme() {
   const [checked, setChecked] = React.useState(false);
   const [expandPaths, setExpandPaths] = React.useState(null);
   const t = useTranslate();
@@ -305,43 +278,35 @@ function DefaultTheme(props) {
   }, [checked, allNodeIds]);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%' }}>
       <FormControlLabel
-        className={classes.switch}
+        sx={{ pb: 1 }}
         control={
           <Switch
             checked={checked}
-            onChange={(event, newChecked) => {
-              setChecked(newChecked);
-              setExpandPaths(newChecked ? allNodeIds : []);
+            onChange={(event) => {
+              setChecked(event.target.checked);
+              setExpandPaths(event.target.checked ? allNodeIds : []);
             }}
           />
         }
         label={t('expandAll')}
       />
       <FormControlLabel
-        className={classes.switch}
+        sx={{ pb: 1 }}
         control={
           <Switch
             checked={darkTheme}
-            onChange={(event, newValue) => {
-              setDarkTheme(newValue);
+            onChange={(event) => {
+              setDarkTheme(event.target.checked);
             }}
           />
         }
         label={t('useDarkTheme')}
       />
-      <Inspector
-        className={classes.inspector}
-        data={data}
-        expandPaths={expandPaths}
-      />
-    </div>
+      <Inspector data={data} expandPaths={expandPaths} />
+    </Box>
   );
 }
 
-DefaultTheme.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(DefaultTheme);
+export default DefaultTheme;
diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 6e691e1d40bf63..ac0982d07c7114 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -2,43 +2,38 @@ import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import {
-  makeStyles,
+  experimentalStyled as styled,
   ThemeProvider,
   useTheme,
   createTheme,
 } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.default,
-    color: theme.palette.text.primary,
-    padding: theme.spacing(2),
-    [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(3),
-    },
+const Root = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  padding: theme.spacing(2),
+  [theme.breakpoints.up('md')]: {
+    padding: theme.spacing(3),
   },
-  group: {
-    marginTop: theme.spacing(3),
-  },
-  color: {
-    display: 'flex',
-    alignItems: 'center',
-    '& div:first-of-type': {
-      width: theme.spacing(6),
-      height: theme.spacing(6),
-      flexShrink: 0,
-      marginRight: theme.spacing(1),
-      borderRadius: theme.shape.borderRadius,
-    },
+}));
+
+const Color = styled(Grid)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  '& div:first-of-type': {
+    width: theme.spacing(6),
+    height: theme.spacing(6),
+    flexShrink: 0,
+    marginRight: theme.spacing(1),
+    borderRadius: theme.shape.borderRadius,
   },
 }));
 
 function Demo() {
-  const classes = useStyles();
   const theme = useTheme();
 
   const item = (color, name, expanded = false, border = false) => (
-    <Grid item xs={12} sm={6} md={expanded ? 8 : 4} className={classes.color}>
+    <Color item xs={12} sm={6} md={expanded ? 8 : 4}>
       <div
         style={{
           backgroundColor: color,
@@ -51,18 +46,18 @@ function Demo() {
           {color}
         </Typography>
       </div>
-    </Grid>
+    </Color>
   );
 
   return (
-    <div className={classes.root}>
+    <Root>
       <Typography gutterBottom>Typography</Typography>
       <Grid container spacing={1}>
         {item(theme.palette.text.primary, 'palette.text.primary')}
         {item(theme.palette.text.secondary, 'palette.text.secondary')}
         {item(theme.palette.text.disabled, 'palette.text.disabled')}
       </Grid>
-      <Typography gutterBottom className={classes.group}>
+      <Typography gutterBottom sx={{ mt: 3 }}>
         Buttons
       </Typography>
       <Grid container spacing={1}>
@@ -76,7 +71,7 @@ function Demo() {
           true,
         )}
       </Grid>
-      <Typography gutterBottom className={classes.group}>
+      <Typography gutterBottom sx={{ mt: 3 }}>
         Background
       </Typography>
       <Grid container spacing={1}>
@@ -88,13 +83,13 @@ function Demo() {
         )}
         {item(theme.palette.background.paper, 'palette.background.paper')}
       </Grid>
-      <Typography gutterBottom className={classes.group}>
+      <Typography gutterBottom sx={{ mt: 3 }}>
         Divider
       </Typography>
       <Grid container spacing={1}>
         {item(theme.palette.divider, 'palette.divider')}
       </Grid>
-    </div>
+    </Root>
   );
 }
 
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOut.js b/docs/src/pages/guides/right-to-left/RtlOptOut.js
index f45eead8a359fb..4019c88d8ff720 100644
--- a/docs/src/pages/guides/right-to-left/RtlOptOut.js
+++ b/docs/src/pages/guides/right-to-left/RtlOptOut.js
@@ -1,20 +1,26 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    marginTop: theme.spacing(4),
-    marginRight: theme.spacing(2),
-  },
-  affected: {
-    textAlign: 'right',
-  },
-  unaffected: {
-    flip: false,
-    textAlign: 'right',
-  },
-}));
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      width: '100%',
+      marginTop: theme.spacing(4),
+      marginRight: theme.spacing(2),
+    },
+    affected: {
+      textAlign: 'right',
+    },
+    unaffected: {
+      flip: false,
+      textAlign: 'right',
+    },
+  }),
+  { defaultTheme },
+);
 
 export default function RtlOptOut() {
   const classes = useStyles();
diff --git a/docs/src/pages/guides/right-to-left/RtlOptOut.tsx b/docs/src/pages/guides/right-to-left/RtlOptOut.tsx
index 5a8d42089ee058..0fa0c6239f8c10 100644
--- a/docs/src/pages/guides/right-to-left/RtlOptOut.tsx
+++ b/docs/src/pages/guides/right-to-left/RtlOptOut.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme, Theme } from '@material-ui/core/styles';
 
 declare module '@material-ui/core/styles' {
   // Augment the BaseCSSProperties so that we can control jss-rtl
@@ -11,20 +12,25 @@ declare module '@material-ui/core/styles' {
   }
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    width: '100%',
-    marginTop: theme.spacing(4),
-    marginRight: theme.spacing(2),
-  },
-  affected: {
-    textAlign: 'right',
-  },
-  unaffected: {
-    flip: false,
-    textAlign: 'right',
-  },
-}));
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      width: '100%',
+      marginTop: theme.spacing(4),
+      marginRight: theme.spacing(2),
+    },
+    affected: {
+      textAlign: 'right',
+    },
+    unaffected: {
+      flip: false,
+      textAlign: 'right',
+    },
+  }),
+  { defaultTheme },
+);
 
 export default function RtlOptOut() {
   const classes = useStyles();
diff --git a/docs/src/pages/production-error/ErrorDecoder.js b/docs/src/pages/production-error/ErrorDecoder.js
index 42e4e8396c5057..09b3032a1cf221 100644
--- a/docs/src/pages/production-error/ErrorDecoder.js
+++ b/docs/src/pages/production-error/ErrorDecoder.js
@@ -4,7 +4,8 @@ import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
-import { experimentalStyled as styled, makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled, createTheme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import { renderInline as renderInlineMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 
@@ -13,13 +14,18 @@ const ErrorMessageSection = styled('div')({
   display: 'block',
 });
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    boxShadow: theme.shadows['2'],
-    color: theme.palette.error.main,
-    padding: theme.spacing(1, 2),
-  },
-}));
+const defaultTheme = createTheme();
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      boxShadow: theme.shadows['2'],
+      color: theme.palette.error.main,
+      padding: theme.spacing(1, 2),
+    },
+  }),
+  { defaultTheme },
+);
 
 const ErrorMessageMarkdown = (props) => {
   const { className, ...other } = props;
diff --git a/test/regressions/fixtures/Menu/MenuContentAnchors.js b/test/regressions/fixtures/Menu/MenuContentAnchors.js
index c6c9ba927d08ac..30dfb8ea593528 100644
--- a/test/regressions/fixtures/Menu/MenuContentAnchors.js
+++ b/test/regressions/fixtures/Menu/MenuContentAnchors.js
@@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
 const useMenuStyles = makeStyles({
   anchorEl: {
diff --git a/test/regressions/fixtures/Textarea/Textarea.js b/test/regressions/fixtures/Textarea/Textarea.js
index 9c401e635f5a36..6fc4b232477c56 100644
--- a/test/regressions/fixtures/Textarea/Textarea.js
+++ b/test/regressions/fixtures/Textarea/Textarea.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 import Input from '@material-ui/core/Input';
 
 const useStyles = makeStyles({