diff --git a/docs/src/pages/components/dividers/InsetDividers.js b/docs/src/pages/components/dividers/InsetDividers.js
index 135618c2f2758f..db979dd7245a0b 100644
--- a/docs/src/pages/components/dividers/InsetDividers.js
+++ b/docs/src/pages/components/dividers/InsetDividers.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -10,19 +9,15 @@ import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function InsetDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemAvatar>
           <Avatar>
diff --git a/docs/src/pages/components/dividers/InsetDividers.tsx b/docs/src/pages/components/dividers/InsetDividers.tsx
index 75880518789015..db979dd7245a0b 100644
--- a/docs/src/pages/components/dividers/InsetDividers.tsx
+++ b/docs/src/pages/components/dividers/InsetDividers.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -10,21 +9,15 @@ import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function InsetDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemAvatar>
           <Avatar>
diff --git a/docs/src/pages/components/dividers/ListDividers.js b/docs/src/pages/components/dividers/ListDividers.js
index ea63319988cb21..27163c0d5069a7 100644
--- a/docs/src/pages/components/dividers/ListDividers.js
+++ b/docs/src/pages/components/dividers/ListDividers.js
@@ -1,23 +1,18 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
+const style = {
+  width: '100%',
+  maxWidth: 360,
+  bgcolor: 'background.paper',
+};
 
 export default function ListDividers() {
-  const classes = useStyles();
-
   return (
-    <List component="nav" className={classes.root} aria-label="mailbox folders">
+    <List sx={style} component="nav" aria-label="mailbox folders">
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>
diff --git a/docs/src/pages/components/dividers/ListDividers.tsx b/docs/src/pages/components/dividers/ListDividers.tsx
index 0b63800fc5b707..27163c0d5069a7 100644
--- a/docs/src/pages/components/dividers/ListDividers.tsx
+++ b/docs/src/pages/components/dividers/ListDividers.tsx
@@ -1,25 +1,18 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
+const style = {
+  width: '100%',
+  maxWidth: 360,
+  bgcolor: 'background.paper',
+};
 
 export default function ListDividers() {
-  const classes = useStyles();
-
   return (
-    <List component="nav" className={classes.root} aria-label="mailbox folders">
+    <List sx={style} component="nav" aria-label="mailbox folders">
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>
diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js
index 135be2b5ff4690..71630cb0a92cf9 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.js
+++ b/docs/src/pages/components/dividers/MiddleDividers.js
@@ -1,37 +1,21 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Chip from '@material-ui/core/Chip';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-  section1: {
-    margin: theme.spacing(3, 2),
-  },
-  section2: {
-    margin: theme.spacing(2),
-  },
-  section3: {
-    margin: theme.spacing(3, 1, 1),
-  },
-}));
-
 export default function MiddleDividers() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <div className={classes.section1}>
+    <Box
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+      }}
+    >
+      <Box sx={{ my: 3, mx: 2 }}>
         <Grid container alignItems="center">
           <Grid item xs>
             <Typography gutterBottom variant="h4" component="div">
@@ -44,26 +28,33 @@ export default function MiddleDividers() {
             </Typography>
           </Grid>
         </Grid>
-        <Typography color="textSecondary" variant="body2">
+        <Typography color="text.secondary" variant="body2">
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
           just down the hall.
         </Typography>
-      </div>
+      </Box>
       <Divider variant="middle" />
-      <div className={classes.section2}>
+      <Box sx={{ m: 2 }}>
         <Typography gutterBottom variant="body1">
           Select type
         </Typography>
-        <div>
-          <Chip className={classes.chip} label="Extra Soft" />
-          <Chip className={classes.chip} color="primary" label="Soft" />
-          <Chip className={classes.chip} label="Medium" />
-          <Chip className={classes.chip} label="Hard" />
-        </div>
-      </div>
-      <div className={classes.section3}>
+        <Box
+          sx={{
+            // Replace with Stack
+            '& > :not(style) + :not(style)': {
+              ml: 1,
+            },
+          }}
+        >
+          <Chip label="Extra Soft" />
+          <Chip color="primary" label="Soft" />
+          <Chip label="Medium" />
+          <Chip label="Hard" />
+        </Box>
+      </Box>
+      <Box sx={{ mt: 3, ml: 1, mb: 1 }}>
         <Button>Add to cart</Button>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/dividers/MiddleDividers.tsx b/docs/src/pages/components/dividers/MiddleDividers.tsx
index e5b13ee3787b68..71630cb0a92cf9 100644
--- a/docs/src/pages/components/dividers/MiddleDividers.tsx
+++ b/docs/src/pages/components/dividers/MiddleDividers.tsx
@@ -1,39 +1,21 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Chip from '@material-ui/core/Chip';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-    chip: {
-      margin: theme.spacing(0.5),
-    },
-    section1: {
-      margin: theme.spacing(3, 2),
-    },
-    section2: {
-      margin: theme.spacing(2),
-    },
-    section3: {
-      margin: theme.spacing(3, 1, 1),
-    },
-  }),
-);
-
 export default function MiddleDividers() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <div className={classes.section1}>
+    <Box
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+      }}
+    >
+      <Box sx={{ my: 3, mx: 2 }}>
         <Grid container alignItems="center">
           <Grid item xs>
             <Typography gutterBottom variant="h4" component="div">
@@ -46,26 +28,33 @@ export default function MiddleDividers() {
             </Typography>
           </Grid>
         </Grid>
-        <Typography color="textSecondary" variant="body2">
+        <Typography color="text.secondary" variant="body2">
           Pinstriped cornflower blue cotton blouse takes you on a walk to the park or
           just down the hall.
         </Typography>
-      </div>
+      </Box>
       <Divider variant="middle" />
-      <div className={classes.section2}>
+      <Box sx={{ m: 2 }}>
         <Typography gutterBottom variant="body1">
           Select type
         </Typography>
-        <div>
-          <Chip className={classes.chip} label="Extra Soft" />
-          <Chip className={classes.chip} color="primary" label="Soft" />
-          <Chip className={classes.chip} label="Medium" />
-          <Chip className={classes.chip} label="Hard" />
-        </div>
-      </div>
-      <div className={classes.section3}>
+        <Box
+          sx={{
+            // Replace with Stack
+            '& > :not(style) + :not(style)': {
+              ml: 1,
+            },
+          }}
+        >
+          <Chip label="Extra Soft" />
+          <Chip color="primary" label="Soft" />
+          <Chip label="Medium" />
+          <Chip label="Hard" />
+        </Box>
+      </Box>
+      <Box sx={{ mt: 3, ml: 1, mb: 1 }}>
         <Button>Add to cart</Button>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.js b/docs/src/pages/components/dividers/SubheaderDividers.js
index 1811ef074f09c4..9fd55b34a24d47 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.js
+++ b/docs/src/pages/components/dividers/SubheaderDividers.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -9,32 +8,22 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-  dividerFullWidth: {
-    margin: `5px 0 0 ${theme.spacing(2)}`,
-  },
-  dividerInset: {
-    margin: `5px 0 0 ${theme.spacing(9)}`,
-  },
-}));
-
 export default function SubheaderDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <Divider component="li" />
       <li>
         <Typography
-          className={classes.dividerFullWidth}
+          sx={{ mt: 0.5, ml: 2 }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -48,7 +37,7 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          className={classes.dividerInset}
+          sx={{ mt: 0.5, ml: 9 }}
           color="textSecondary"
           display="block"
           variant="caption"
diff --git a/docs/src/pages/components/dividers/SubheaderDividers.tsx b/docs/src/pages/components/dividers/SubheaderDividers.tsx
index 8be8597abc939e..9fd55b34a24d47 100644
--- a/docs/src/pages/components/dividers/SubheaderDividers.tsx
+++ b/docs/src/pages/components/dividers/SubheaderDividers.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -9,34 +8,22 @@ import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-    dividerFullWidth: {
-      margin: `5px 0 0 ${theme.spacing(2)}`,
-    },
-    dividerInset: {
-      margin: `5px 0 0 ${theme.spacing(9)}`,
-    },
-  }),
-);
-
 export default function SubheaderDividers() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+      }}
+    >
       <ListItem>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <Divider component="li" />
       <li>
         <Typography
-          className={classes.dividerFullWidth}
+          sx={{ mt: 0.5, ml: 2 }}
           color="textSecondary"
           display="block"
           variant="caption"
@@ -50,7 +37,7 @@ export default function SubheaderDividers() {
       <Divider component="li" variant="inset" />
       <li>
         <Typography
-          className={classes.dividerInset}
+          sx={{ mt: 0.5, ml: 9 }}
           color="textSecondary"
           display="block"
           variant="caption"
diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js
index a26e454a696c73..6c2b37eba2a279 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.js
+++ b/docs/src/pages/components/dividers/VerticalDividers.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
@@ -9,28 +8,26 @@ import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: 'fit-content',
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.secondary,
-    '& svg': {
-      margin: theme.spacing(1.5),
-    },
-    '& hr': {
-      margin: theme.spacing(0, 0.5),
-    },
-  },
-}));
-
 export default function VerticalDividers() {
-  const classes = useStyles();
-
   return (
     <div>
-      <Grid container alignItems="center" className={classes.root}>
+      <Grid
+        sx={{
+          width: 'fit-content',
+          border: (theme) => `1px solid ${theme.palette.divider}`,
+          borderRadius: 1,
+          bgcolor: 'background.paper',
+          color: 'text.secondary',
+          '& svg': {
+            m: 1.5,
+          },
+          '& hr': {
+            mx: 0.5,
+          },
+        }}
+        container
+        alignItems="center"
+      >
         <FormatAlignLeftIcon />
         <FormatAlignCenterIcon />
         <FormatAlignRightIcon />
diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx
index e0cd1de3c1caa5..6c2b37eba2a279 100644
--- a/docs/src/pages/components/dividers/VerticalDividers.tsx
+++ b/docs/src/pages/components/dividers/VerticalDividers.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
@@ -9,30 +8,26 @@ import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
 import Grid from '@material-ui/core/Grid';
 import Divider from '@material-ui/core/Divider';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: 'fit-content',
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.secondary,
-      '& svg': {
-        margin: theme.spacing(1.5),
-      },
-      '& hr': {
-        margin: theme.spacing(0, 0.5),
-      },
-    },
-  }),
-);
-
 export default function VerticalDividers() {
-  const classes = useStyles();
-
   return (
     <div>
-      <Grid container alignItems="center" className={classes.root}>
+      <Grid
+        sx={{
+          width: 'fit-content',
+          border: (theme) => `1px solid ${theme.palette.divider}`,
+          borderRadius: 1,
+          bgcolor: 'background.paper',
+          color: 'text.secondary',
+          '& svg': {
+            m: 1.5,
+          },
+          '& hr': {
+            mx: 0.5,
+          },
+        }}
+        container
+        alignItems="center"
+      >
         <FormatAlignLeftIcon />
         <FormatAlignCenterIcon />
         <FormatAlignRightIcon />