diff --git a/docs/src/pages/components/chips/Chips.js b/docs/src/pages/components/chips/Chips.js
index fdc3dfe9962dbc..ddc355ba61a631 100644
--- a/docs/src/pages/components/chips/Chips.js
+++ b/docs/src/pages/components/chips/Chips.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    '& > *': {
-      margin: theme.spacing(0.5),
-    },
-  },
-}));
-
 export default function Chips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -28,7 +15,16 @@ export default function Chips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip label="Basic" />
       <Chip label="Disabled" disabled />
       <Chip avatar={<Avatar>M</Avatar>} label="Clickable" onClick={handleClick} />
@@ -73,6 +69,6 @@ export default function Chips() {
         onDelete={handleDelete}
         color="secondary"
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/chips/Chips.tsx b/docs/src/pages/components/chips/Chips.tsx
index 363d5de905704e..ddc355ba61a631 100644
--- a/docs/src/pages/components/chips/Chips.tsx
+++ b/docs/src/pages/components/chips/Chips.tsx
@@ -1,26 +1,11 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      '& > *': {
-        margin: theme.spacing(0.5),
-      },
-    },
-  }),
-);
-
 export default function Chips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -30,7 +15,16 @@ export default function Chips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip label="Basic" />
       <Chip label="Disabled" disabled />
       <Chip avatar={<Avatar>M</Avatar>} label="Clickable" onClick={handleClick} />
@@ -75,6 +69,6 @@ export default function Chips() {
         onDelete={handleDelete}
         color="secondary"
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js
index 9fe12fdc74a8ce..f0e9f8b2665280 100644
--- a/docs/src/pages/components/chips/ChipsArray.js
+++ b/docs/src/pages/components/chips/ChipsArray.js
@@ -1,25 +1,14 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import Paper from '@material-ui/core/Paper';
 import TagFacesIcon from '@material-ui/icons/TagFaces';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    listStyle: 'none',
-    padding: theme.spacing(0.5),
-    margin: 0,
-  },
-  chip: {
-    margin: theme.spacing(0.5),
-  },
+const ListItem = styled('li')(({ theme }) => ({
+  margin: theme.spacing(0.5),
 }));
 
 export default function ChipsArray() {
-  const classes = useStyles();
   const [chipData, setChipData] = React.useState([
     { key: 0, label: 'Angular' },
     { key: 1, label: 'jQuery' },
@@ -33,7 +22,17 @@ export default function ChipsArray() {
   };
 
   return (
-    <Paper component="ul" className={classes.root}>
+    <Paper
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        listStyle: 'none',
+        p: 0.5,
+        m: 0,
+      }}
+      component="ul"
+    >
       {chipData.map((data) => {
         let icon;
 
@@ -42,14 +41,13 @@ export default function ChipsArray() {
         }
 
         return (
-          <li key={data.key}>
+          <ListItem key={data.key}>
             <Chip
               icon={icon}
               label={data.label}
               onDelete={data.label === 'React' ? undefined : handleDelete(data)}
-              className={classes.chip}
             />
-          </li>
+          </ListItem>
         );
       })}
     </Paper>
diff --git a/docs/src/pages/components/chips/ChipsArray.tsx b/docs/src/pages/components/chips/ChipsArray.tsx
index 2fc10067ca663e..d2a141e72a8b86 100644
--- a/docs/src/pages/components/chips/ChipsArray.tsx
+++ b/docs/src/pages/components/chips/ChipsArray.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import Paper from '@material-ui/core/Paper';
 import TagFacesIcon from '@material-ui/icons/TagFaces';
@@ -9,24 +9,11 @@ interface ChipData {
   label: string;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      listStyle: 'none',
-      padding: theme.spacing(0.5),
-      margin: 0,
-    },
-    chip: {
-      margin: theme.spacing(0.5),
-    },
-  }),
-);
+const ListItem = styled('li')(({ theme }) => ({
+  margin: theme.spacing(0.5),
+}));
 
 export default function ChipsArray() {
-  const classes = useStyles();
   const [chipData, setChipData] = React.useState<ChipData[]>([
     { key: 0, label: 'Angular' },
     { key: 1, label: 'jQuery' },
@@ -40,7 +27,17 @@ export default function ChipsArray() {
   };
 
   return (
-    <Paper component="ul" className={classes.root}>
+    <Paper
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        listStyle: 'none',
+        p: 0.5,
+        m: 0,
+      }}
+      component="ul"
+    >
       {chipData.map((data) => {
         let icon;
 
@@ -49,14 +46,13 @@ export default function ChipsArray() {
         }
 
         return (
-          <li key={data.key}>
+          <ListItem key={data.key}>
             <Chip
               icon={icon}
               label={data.label}
               onDelete={data.label === 'React' ? undefined : handleDelete(data)}
-              className={classes.chip}
             />
-          </li>
+          </ListItem>
         );
       })}
     </Paper>
diff --git a/docs/src/pages/components/chips/OutlinedChips.js b/docs/src/pages/components/chips/OutlinedChips.js
index 59d8569fbb6115..8de847099756fb 100644
--- a/docs/src/pages/components/chips/OutlinedChips.js
+++ b/docs/src/pages/components/chips/OutlinedChips.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    '& > *': {
-      margin: theme.spacing(0.5),
-    },
-  },
-}));
-
 export default function OutlinedChips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -28,7 +15,16 @@ export default function OutlinedChips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip label="Basic" variant="outlined" />
       <Chip label="Disabled" disabled variant="outlined" />
       <Chip
@@ -95,6 +91,6 @@ export default function OutlinedChips() {
         color="secondary"
         variant="outlined"
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/chips/OutlinedChips.tsx b/docs/src/pages/components/chips/OutlinedChips.tsx
index 1abdb4163b8eb4..8de847099756fb 100644
--- a/docs/src/pages/components/chips/OutlinedChips.tsx
+++ b/docs/src/pages/components/chips/OutlinedChips.tsx
@@ -1,26 +1,11 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      '& > *': {
-        margin: theme.spacing(0.5),
-      },
-    },
-  }),
-);
-
 export default function OutlinedChips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -30,7 +15,16 @@ export default function OutlinedChips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip label="Basic" variant="outlined" />
       <Chip label="Disabled" disabled variant="outlined" />
       <Chip
@@ -97,6 +91,6 @@ export default function OutlinedChips() {
         color="secondary"
         variant="outlined"
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/chips/SmallChips.js b/docs/src/pages/components/chips/SmallChips.js
index 9a6200154336fc..bac169c2cedaac 100644
--- a/docs/src/pages/components/chips/SmallChips.js
+++ b/docs/src/pages/components/chips/SmallChips.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    '& > *': {
-      margin: theme.spacing(0.5),
-    },
-  },
-}));
-
 export default function SmallChips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -28,7 +15,16 @@ export default function SmallChips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip size="small" label="Basic" />
       <Chip
         size="small"
@@ -94,6 +90,6 @@ export default function SmallChips() {
         onDelete={handleDelete}
         color="secondary"
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/chips/SmallChips.tsx b/docs/src/pages/components/chips/SmallChips.tsx
index e22fa8c5d2a90d..bac169c2cedaac 100644
--- a/docs/src/pages/components/chips/SmallChips.tsx
+++ b/docs/src/pages/components/chips/SmallChips.tsx
@@ -1,26 +1,11 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      '& > *': {
-        margin: theme.spacing(0.5),
-      },
-    },
-  }),
-);
-
 export default function SmallChips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -30,7 +15,16 @@ export default function SmallChips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip size="small" label="Basic" />
       <Chip
         size="small"
@@ -96,6 +90,6 @@ export default function SmallChips() {
         onDelete={handleDelete}
         color="secondary"
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/chips/SmallOutlinedChips.js b/docs/src/pages/components/chips/SmallOutlinedChips.js
index f07eaedbeaf131..9bdadc07e3f9f6 100644
--- a/docs/src/pages/components/chips/SmallOutlinedChips.js
+++ b/docs/src/pages/components/chips/SmallOutlinedChips.js
@@ -1,24 +1,11 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    '& > *': {
-      margin: theme.spacing(0.5),
-    },
-  },
-}));
-
 export default function SmallOutlinedChips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -28,7 +15,16 @@ export default function SmallOutlinedChips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip variant="outlined" size="small" label="Basic" />
       <Chip
         variant="outlined"
@@ -103,6 +99,6 @@ export default function SmallOutlinedChips() {
         onDelete={handleDelete}
         color="secondary"
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/chips/SmallOutlinedChips.tsx b/docs/src/pages/components/chips/SmallOutlinedChips.tsx
index 577bf947c523c1..9bdadc07e3f9f6 100644
--- a/docs/src/pages/components/chips/SmallOutlinedChips.tsx
+++ b/docs/src/pages/components/chips/SmallOutlinedChips.tsx
@@ -1,26 +1,11 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
 import DoneIcon from '@material-ui/icons/Done';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-      '& > *': {
-        margin: theme.spacing(0.5),
-      },
-    },
-  }),
-);
-
 export default function SmallOutlinedChips() {
-  const classes = useStyles();
-
   const handleDelete = () => {
     console.info('You clicked the delete icon.');
   };
@@ -30,7 +15,16 @@ export default function SmallOutlinedChips() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        '& > :not(style)': {
+          m: 0.5,
+        },
+      }}
+    >
       <Chip variant="outlined" size="small" label="Basic" />
       <Chip
         variant="outlined"
@@ -105,6 +99,6 @@ export default function SmallOutlinedChips() {
         onDelete={handleDelete}
         color="secondary"
       />
-    </div>
+    </Box>
   );
 }