From b96916d373096570b96db101e0ceca25f7ca9346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Casas?=
 <57921784+vicasas@users.noreply.github.com>
Date: Tue, 9 Mar 2021 07:31:30 -0300
Subject: [PATCH] [docs] Migrate List demos to emotion (#25266)

---
 .../pages/components/lists/AlignItemsList.js  | 22 ++------
 .../pages/components/lists/AlignItemsList.tsx | 24 ++-------
 .../pages/components/lists/CheckboxList.js    | 12 +----
 .../pages/components/lists/CheckboxList.tsx   | 14 +----
 .../components/lists/CheckboxListSecondary.js | 12 +----
 .../lists/CheckboxListSecondary.tsx           | 14 +----
 docs/src/pages/components/lists/FolderList.js | 13 +----
 .../src/pages/components/lists/FolderList.tsx | 15 +-----
 .../pages/components/lists/GutterlessList.js  | 13 +----
 .../pages/components/lists/GutterlessList.tsx | 15 +-----
 docs/src/pages/components/lists/InsetList.js  | 17 ++-----
 docs/src/pages/components/lists/InsetList.tsx | 19 ++-----
 .../pages/components/lists/InteractiveList.js | 49 ++++++++----------
 .../components/lists/InteractiveList.tsx      | 51 ++++++++-----------
 docs/src/pages/components/lists/NestedList.js | 17 +------
 .../src/pages/components/lists/NestedList.tsx | 19 +------
 .../components/lists/PinnedSubheaderList.js   | 41 +++++++--------
 .../components/lists/PinnedSubheaderList.tsx  | 43 +++++++---------
 .../components/lists/SelectedListItem.js      | 15 ++----
 .../components/lists/SelectedListItem.tsx     | 17 ++-----
 docs/src/pages/components/lists/SimpleList.js | 16 ++----
 .../src/pages/components/lists/SimpleList.tsx | 18 ++-----
 .../components/lists/SwitchListSecondary.js   | 12 +----
 .../components/lists/SwitchListSecondary.tsx  | 14 +----
 .../pages/components/lists/VirtualizedList.js | 19 ++-----
 .../components/lists/VirtualizedList.tsx      | 21 ++------
 26 files changed, 128 insertions(+), 414 deletions(-)

diff --git a/docs/src/pages/components/lists/AlignItemsList.js b/docs/src/pages/components/lists/AlignItemsList.js
index 85792d4f91e4d2..d54aca6a96cb50 100644
--- a/docs/src/pages/components/lists/AlignItemsList.js
+++ b/docs/src/pages/components/lists/AlignItemsList.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 Divider from '@material-ui/core/Divider';
@@ -8,22 +7,9 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-  inline: {
-    display: 'inline',
-  },
-}));
-
 export default function AlignItemsList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
@@ -33,9 +19,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Ali Connors
@@ -55,9 +41,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 to Scott, Alex, Jennifer
@@ -77,9 +63,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Sandra Adams
diff --git a/docs/src/pages/components/lists/AlignItemsList.tsx b/docs/src/pages/components/lists/AlignItemsList.tsx
index ca2f67d5161e7d..d54aca6a96cb50 100644
--- a/docs/src/pages/components/lists/AlignItemsList.tsx
+++ b/docs/src/pages/components/lists/AlignItemsList.tsx
@@ -1,5 +1,4 @@
 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 Divider from '@material-ui/core/Divider';
@@ -8,24 +7,9 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-    inline: {
-      display: 'inline',
-    },
-  }),
-);
-
 export default function AlignItemsList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
@@ -35,9 +19,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Ali Connors
@@ -57,9 +41,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 to Scott, Alex, Jennifer
@@ -79,9 +63,9 @@ export default function AlignItemsList() {
           secondary={
             <React.Fragment>
               <Typography
+                sx={{ display: 'inline' }}
                 component="span"
                 variant="body2"
-                className={classes.inline}
                 color="textPrimary"
               >
                 Sandra Adams
diff --git a/docs/src/pages/components/lists/CheckboxList.js b/docs/src/pages/components/lists/CheckboxList.js
index 3da7be7e362099..314b8b14035935 100644
--- a/docs/src/pages/components/lists/CheckboxList.js
+++ b/docs/src/pages/components/lists/CheckboxList.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 ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -9,16 +8,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import IconButton from '@material-ui/core/IconButton';
 import CommentIcon from '@material-ui/icons/Comment';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function CheckboxList() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([0]);
 
   const handleToggle = (value) => () => {
@@ -35,7 +25,7 @@ export default function CheckboxList() {
   };
 
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-label-${value}`;
 
diff --git a/docs/src/pages/components/lists/CheckboxList.tsx b/docs/src/pages/components/lists/CheckboxList.tsx
index 000ab3a4173d31..63eb9a60d4ae71 100644
--- a/docs/src/pages/components/lists/CheckboxList.tsx
+++ b/docs/src/pages/components/lists/CheckboxList.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -9,18 +8,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import IconButton from '@material-ui/core/IconButton';
 import CommentIcon from '@material-ui/icons/Comment';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function CheckboxList() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([0]);
 
   const handleToggle = (value: number) => () => {
@@ -37,7 +25,7 @@ export default function CheckboxList() {
   };
 
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-label-${value}`;
 
diff --git a/docs/src/pages/components/lists/CheckboxListSecondary.js b/docs/src/pages/components/lists/CheckboxListSecondary.js
index 7f7350c98e16a2..d2752922a66a79 100644
--- a/docs/src/pages/components/lists/CheckboxListSecondary.js
+++ b/docs/src/pages/components/lists/CheckboxListSecondary.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 ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
@@ -8,16 +7,7 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Checkbox from '@material-ui/core/Checkbox';
 import Avatar from '@material-ui/core/Avatar';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function CheckboxListSecondary() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([1]);
 
   const handleToggle = (value) => () => {
@@ -34,7 +24,7 @@ export default function CheckboxListSecondary() {
   };
 
   return (
-    <List dense className={classes.root}>
+    <List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-secondary-label-${value}`;
         return (
diff --git a/docs/src/pages/components/lists/CheckboxListSecondary.tsx b/docs/src/pages/components/lists/CheckboxListSecondary.tsx
index a5fb3244804485..b08876460548bd 100644
--- a/docs/src/pages/components/lists/CheckboxListSecondary.tsx
+++ b/docs/src/pages/components/lists/CheckboxListSecondary.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
@@ -8,18 +7,7 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Checkbox from '@material-ui/core/Checkbox';
 import Avatar from '@material-ui/core/Avatar';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function CheckboxListSecondary() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState([1]);
 
   const handleToggle = (value: number) => () => {
@@ -36,7 +24,7 @@ export default function CheckboxListSecondary() {
   };
 
   return (
-    <List dense className={classes.root}>
+    <List dense sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[0, 1, 2, 3].map((value) => {
         const labelId = `checkbox-list-secondary-label-${value}`;
         return (
diff --git a/docs/src/pages/components/lists/FolderList.js b/docs/src/pages/components/lists/FolderList.js
index ce720cffda3ec8..a0cac8c77c2e20 100644
--- a/docs/src/pages/components/lists/FolderList.js
+++ b/docs/src/pages/components/lists/FolderList.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';
@@ -9,19 +8,9 @@ import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function FolderList() {
-  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/lists/FolderList.tsx b/docs/src/pages/components/lists/FolderList.tsx
index 48b7c45b95abdd..a0cac8c77c2e20 100644
--- a/docs/src/pages/components/lists/FolderList.tsx
+++ b/docs/src/pages/components/lists/FolderList.tsx
@@ -1,5 +1,4 @@
 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';
@@ -9,21 +8,9 @@ import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
 import BeachAccessIcon from '@material-ui/icons/BeachAccess';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function FolderList() {
-  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/lists/GutterlessList.js b/docs/src/pages/components/lists/GutterlessList.js
index b864ca0f9f5615..778869d08ee37b 100644
--- a/docs/src/pages/components/lists/GutterlessList.js
+++ b/docs/src/pages/components/lists/GutterlessList.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 ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
@@ -7,19 +6,9 @@ import ListItemText from '@material-ui/core/ListItemText';
 import CommentIcon from '@material-ui/icons/Comment';
 import IconButton from '@material-ui/core/IconButton';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function GutterlessList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[1, 2, 3].map((value) => (
         <ListItem key={value} disableGutters>
           <ListItemText primary={`Line item ${value}`} />
diff --git a/docs/src/pages/components/lists/GutterlessList.tsx b/docs/src/pages/components/lists/GutterlessList.tsx
index 2c658fc682583a..778869d08ee37b 100644
--- a/docs/src/pages/components/lists/GutterlessList.tsx
+++ b/docs/src/pages/components/lists/GutterlessList.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
@@ -7,21 +6,9 @@ import ListItemText from '@material-ui/core/ListItemText';
 import CommentIcon from '@material-ui/icons/Comment';
 import IconButton from '@material-ui/core/IconButton';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function GutterlessList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       {[1, 2, 3].map((value) => (
         <ListItem key={value} disableGutters>
           <ListItemText primary={`Line item ${value}`} />
diff --git a/docs/src/pages/components/lists/InsetList.js b/docs/src/pages/components/lists/InsetList.js
index 43de04db983028..3948a75af48d43 100644
--- a/docs/src/pages/components/lists/InsetList.js
+++ b/docs/src/pages/components/lists/InsetList.js
@@ -1,24 +1,17 @@
 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 ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import StarIcon from '@material-ui/icons/Star';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function InsetList() {
-  const classes = useStyles();
-
   return (
-    <List component="nav" className={classes.root} aria-label="contacts">
+    <List
+      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
+      component="nav"
+      aria-label="contacts"
+    >
       <ListItem button>
         <ListItemIcon>
           <StarIcon />
diff --git a/docs/src/pages/components/lists/InsetList.tsx b/docs/src/pages/components/lists/InsetList.tsx
index ccf49469639584..3948a75af48d43 100644
--- a/docs/src/pages/components/lists/InsetList.tsx
+++ b/docs/src/pages/components/lists/InsetList.tsx
@@ -1,26 +1,17 @@
 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 ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import StarIcon from '@material-ui/icons/Star';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function InsetList() {
-  const classes = useStyles();
-
   return (
-    <List component="nav" className={classes.root} aria-label="contacts">
+    <List
+      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
+      component="nav"
+      aria-label="contacts"
+    >
       <ListItem button>
         <ListItemIcon>
           <StarIcon />
diff --git a/docs/src/pages/components/lists/InteractiveList.js b/docs/src/pages/components/lists/InteractiveList.js
index 95be70091467fc..d814bcf837008b 100644
--- a/docs/src/pages/components/lists/InteractiveList.js
+++ b/docs/src/pages/components/lists/InteractiveList.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 List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -16,19 +17,6 @@ import Typography from '@material-ui/core/Typography';
 import FolderIcon from '@material-ui/icons/Folder';
 import DeleteIcon from '@material-ui/icons/Delete';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-    maxWidth: 752,
-  },
-  demo: {
-    backgroundColor: theme.palette.background.paper,
-  },
-  title: {
-    margin: theme.spacing(4, 0, 2),
-  },
-}));
-
 function generate(element) {
   return [0, 1, 2].map((value) =>
     React.cloneElement(element, {
@@ -37,13 +25,16 @@ function generate(element) {
   );
 }
 
+const Demo = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+}));
+
 export default function InteractiveList() {
-  const classes = useStyles();
   const [dense, setDense] = React.useState(false);
   const [secondary, setSecondary] = React.useState(false);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ flexGrow: 1, maxWidth: 752 }}>
       <FormGroup row>
         <FormControlLabel
           control={
@@ -66,10 +57,10 @@ export default function InteractiveList() {
       </FormGroup>
       <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Text only
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -80,13 +71,13 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Icon with text
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -100,15 +91,15 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
       </Grid>
       <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Avatar with text
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -124,13 +115,13 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Avatar with text and icon
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -151,9 +142,9 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/lists/InteractiveList.tsx b/docs/src/pages/components/lists/InteractiveList.tsx
index 25722cf5b2f5ce..64f55d4132eb7f 100644
--- a/docs/src/pages/components/lists/InteractiveList.tsx
+++ b/docs/src/pages/components/lists/InteractiveList.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -16,21 +17,6 @@ import Typography from '@material-ui/core/Typography';
 import FolderIcon from '@material-ui/icons/Folder';
 import DeleteIcon from '@material-ui/icons/Delete';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      maxWidth: 752,
-    },
-    demo: {
-      backgroundColor: theme.palette.background.paper,
-    },
-    title: {
-      margin: theme.spacing(4, 0, 2),
-    },
-  }),
-);
-
 function generate(element: React.ReactElement) {
   return [0, 1, 2].map((value) =>
     React.cloneElement(element, {
@@ -39,13 +25,16 @@ function generate(element: React.ReactElement) {
   );
 }
 
+const Demo = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+}));
+
 export default function InteractiveList() {
-  const classes = useStyles();
   const [dense, setDense] = React.useState(false);
   const [secondary, setSecondary] = React.useState(false);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ flexGrow: 1, maxWidth: 752 }}>
       <FormGroup row>
         <FormControlLabel
           control={
@@ -68,10 +57,10 @@ export default function InteractiveList() {
       </FormGroup>
       <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Text only
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -82,13 +71,13 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Icon with text
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -102,15 +91,15 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
       </Grid>
       <Grid container spacing={2}>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Avatar with text
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -126,13 +115,13 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
         <Grid item xs={12} md={6}>
-          <Typography variant="h6" className={classes.title} component="div">
+          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
             Avatar with text and icon
           </Typography>
-          <div className={classes.demo}>
+          <Demo>
             <List dense={dense}>
               {generate(
                 <ListItem>
@@ -153,9 +142,9 @@ export default function InteractiveList() {
                 </ListItem>,
               )}
             </List>
-          </div>
+          </Demo>
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/lists/NestedList.js b/docs/src/pages/components/lists/NestedList.js
index e9f4df258907e1..a4d7bfc9a1fb79 100644
--- a/docs/src/pages/components/lists/NestedList.js
+++ b/docs/src/pages/components/lists/NestedList.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -13,19 +12,7 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import StarBorder from '@material-ui/icons/StarBorder';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-  nested: {
-    paddingLeft: theme.spacing(4),
-  },
-}));
-
 export default function NestedList() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(true);
 
   const handleClick = () => {
@@ -34,6 +21,7 @@ export default function NestedList() {
 
   return (
     <List
+      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
       component="nav"
       aria-labelledby="nested-list-subheader"
       subheader={
@@ -41,7 +29,6 @@ export default function NestedList() {
           Nested List Items
         </ListSubheader>
       }
-      className={classes.root}
     >
       <ListItem button>
         <ListItemIcon>
@@ -64,7 +51,7 @@ export default function NestedList() {
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
-          <ListItem button className={classes.nested}>
+          <ListItem sx={{ pl: 4 }} button>
             <ListItemIcon>
               <StarBorder />
             </ListItemIcon>
diff --git a/docs/src/pages/components/lists/NestedList.tsx b/docs/src/pages/components/lists/NestedList.tsx
index bafad6f9a1d8b7..a4d7bfc9a1fb79 100644
--- a/docs/src/pages/components/lists/NestedList.tsx
+++ b/docs/src/pages/components/lists/NestedList.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import ListSubheader from '@material-ui/core/ListSubheader';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -13,21 +12,7 @@ import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import StarBorder from '@material-ui/icons/StarBorder';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-    nested: {
-      paddingLeft: theme.spacing(4),
-    },
-  }),
-);
-
 export default function NestedList() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(true);
 
   const handleClick = () => {
@@ -36,6 +21,7 @@ export default function NestedList() {
 
   return (
     <List
+      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
       component="nav"
       aria-labelledby="nested-list-subheader"
       subheader={
@@ -43,7 +29,6 @@ export default function NestedList() {
           Nested List Items
         </ListSubheader>
       }
-      className={classes.root}
     >
       <ListItem button>
         <ListItemIcon>
@@ -66,7 +51,7 @@ export default function NestedList() {
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
-          <ListItem button className={classes.nested}>
+          <ListItem sx={{ pl: 4 }} button>
             <ListItemIcon>
               <StarBorder />
             </ListItemIcon>
diff --git a/docs/src/pages/components/lists/PinnedSubheaderList.js b/docs/src/pages/components/lists/PinnedSubheaderList.js
index 668a0e8508d615..429202ee6ae565 100644
--- a/docs/src/pages/components/lists/PinnedSubheaderList.js
+++ b/docs/src/pages/components/lists/PinnedSubheaderList.js
@@ -1,36 +1,29 @@
 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 ListSubheader from '@material-ui/core/ListSubheader';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-    position: 'relative',
-    overflow: 'auto',
-    maxHeight: 300,
-  },
-  listSection: {
-    backgroundColor: 'inherit',
-  },
-  ul: {
-    backgroundColor: 'inherit',
-    padding: 0,
-  },
-}));
-
 export default function PinnedSubheaderList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root} subheader={<li />}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+        position: 'relative',
+        overflow: 'auto',
+        maxHeight: 300,
+        '& > li': {
+          bgcolor: 'inherit',
+          '& > ul': { bgcolor: 'inherit', padding: 0 },
+        },
+      }}
+      subheader={<li />}
+    >
       {[0, 1, 2, 3, 4].map((sectionId) => (
-        <li key={`section-${sectionId}`} className={classes.listSection}>
-          <ul className={classes.ul}>
+        <li key={`section-${sectionId}`}>
+          <ul>
             <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
             {[0, 1, 2].map((item) => (
               <ListItem key={`item-${sectionId}-${item}`}>
diff --git a/docs/src/pages/components/lists/PinnedSubheaderList.tsx b/docs/src/pages/components/lists/PinnedSubheaderList.tsx
index ee1efa13ecbf4b..429202ee6ae565 100644
--- a/docs/src/pages/components/lists/PinnedSubheaderList.tsx
+++ b/docs/src/pages/components/lists/PinnedSubheaderList.tsx
@@ -1,38 +1,29 @@
 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 ListSubheader from '@material-ui/core/ListSubheader';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-      position: 'relative',
-      overflow: 'auto',
-      maxHeight: 300,
-    },
-    listSection: {
-      backgroundColor: 'inherit',
-    },
-    ul: {
-      backgroundColor: 'inherit',
-      padding: 0,
-    },
-  }),
-);
-
 export default function PinnedSubheaderList() {
-  const classes = useStyles();
-
   return (
-    <List className={classes.root} subheader={<li />}>
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 360,
+        bgcolor: 'background.paper',
+        position: 'relative',
+        overflow: 'auto',
+        maxHeight: 300,
+        '& > li': {
+          bgcolor: 'inherit',
+          '& > ul': { bgcolor: 'inherit', padding: 0 },
+        },
+      }}
+      subheader={<li />}
+    >
       {[0, 1, 2, 3, 4].map((sectionId) => (
-        <li key={`section-${sectionId}`} className={classes.listSection}>
-          <ul className={classes.ul}>
+        <li key={`section-${sectionId}`}>
+          <ul>
             <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
             {[0, 1, 2].map((item) => (
               <ListItem key={`item-${sectionId}-${item}`}>
diff --git a/docs/src/pages/components/lists/SelectedListItem.js b/docs/src/pages/components/lists/SelectedListItem.js
index 89e0b8f1e4b244..83812ceb4eb2f4 100644
--- a/docs/src/pages/components/lists/SelectedListItem.js
+++ b/docs/src/pages/components/lists/SelectedListItem.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -8,16 +8,7 @@ import Divider from '@material-ui/core/Divider';
 import InboxIcon from '@material-ui/icons/Inbox';
 import DraftsIcon from '@material-ui/icons/Drafts';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function SelectedListItem() {
-  const classes = useStyles();
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
   const handleListItemClick = (event, index) => {
@@ -25,7 +16,7 @@ export default function SelectedListItem() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <List component="nav" aria-label="main mailbox folders">
         <ListItem
           button
@@ -65,6 +56,6 @@ export default function SelectedListItem() {
           <ListItemText primary="Spam" />
         </ListItem>
       </List>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/lists/SelectedListItem.tsx b/docs/src/pages/components/lists/SelectedListItem.tsx
index 90354031510fa6..52a445fad79404 100644
--- a/docs/src/pages/components/lists/SelectedListItem.tsx
+++ b/docs/src/pages/components/lists/SelectedListItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -8,18 +8,7 @@ import Divider from '@material-ui/core/Divider';
 import InboxIcon from '@material-ui/icons/Inbox';
 import DraftsIcon from '@material-ui/icons/Drafts';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function SelectedListItem() {
-  const classes = useStyles();
   const [selectedIndex, setSelectedIndex] = React.useState(1);
 
   const handleListItemClick = (
@@ -30,7 +19,7 @@ export default function SelectedListItem() {
   };
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <List component="nav" aria-label="main mailbox folders">
         <ListItem
           button
@@ -70,6 +59,6 @@ export default function SelectedListItem() {
           <ListItemText primary="Spam" />
         </ListItem>
       </List>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/lists/SimpleList.js b/docs/src/pages/components/lists/SimpleList.js
index 040029c9075fa8..b90dc3a970396d 100644
--- a/docs/src/pages/components/lists/SimpleList.js
+++ b/docs/src/pages/components/lists/SimpleList.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -8,23 +8,13 @@ import Divider from '@material-ui/core/Divider';
 import InboxIcon from '@material-ui/icons/Inbox';
 import DraftsIcon from '@material-ui/icons/Drafts';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 function ListItemLink(props) {
   return <ListItem button component="a" {...props} />;
 }
 
 export default function SimpleList() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <List component="nav" aria-label="main mailbox folders">
         <ListItem button>
           <ListItemIcon>
@@ -48,6 +38,6 @@ export default function SimpleList() {
           <ListItemText primary="Spam" />
         </ListItemLink>
       </List>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/lists/SimpleList.tsx b/docs/src/pages/components/lists/SimpleList.tsx
index c8e29d372431bd..6ee78a02a12626 100644
--- a/docs/src/pages/components/lists/SimpleList.tsx
+++ b/docs/src/pages/components/lists/SimpleList.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -8,25 +8,13 @@ import Divider from '@material-ui/core/Divider';
 import InboxIcon from '@material-ui/icons/Inbox';
 import DraftsIcon from '@material-ui/icons/Drafts';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 function ListItemLink(props: ListItemProps<'a', { button?: true }>) {
   return <ListItem button component="a" {...props} />;
 }
 
 export default function SimpleList() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
       <List component="nav" aria-label="main mailbox folders">
         <ListItem button>
           <ListItemIcon>
@@ -50,6 +38,6 @@ export default function SimpleList() {
           <ListItemText primary="Spam" />
         </ListItemLink>
       </List>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/lists/SwitchListSecondary.js b/docs/src/pages/components/lists/SwitchListSecondary.js
index 592a910c78245b..4e2a83ae1de695 100644
--- a/docs/src/pages/components/lists/SwitchListSecondary.js
+++ b/docs/src/pages/components/lists/SwitchListSecondary.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 ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -9,16 +8,7 @@ import Switch from '@material-ui/core/Switch';
 import WifiIcon from '@material-ui/icons/Wifi';
 import BluetoothIcon from '@material-ui/icons/Bluetooth';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function SwitchListSecondary() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(['wifi']);
 
   const handleToggle = (value) => () => {
@@ -36,8 +26,8 @@ export default function SwitchListSecondary() {
 
   return (
     <List
+      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
       subheader={<ListSubheader>Settings</ListSubheader>}
-      className={classes.root}
     >
       <ListItem>
         <ListItemIcon>
diff --git a/docs/src/pages/components/lists/SwitchListSecondary.tsx b/docs/src/pages/components/lists/SwitchListSecondary.tsx
index 1a30ef7f806714..c560049862a966 100644
--- a/docs/src/pages/components/lists/SwitchListSecondary.tsx
+++ b/docs/src/pages/components/lists/SwitchListSecondary.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 ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -9,18 +8,7 @@ import Switch from '@material-ui/core/Switch';
 import WifiIcon from '@material-ui/icons/Wifi';
 import BluetoothIcon from '@material-ui/icons/Bluetooth';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 export default function SwitchListSecondary() {
-  const classes = useStyles();
   const [checked, setChecked] = React.useState(['wifi']);
 
   const handleToggle = (value: string) => () => {
@@ -38,8 +26,8 @@ export default function SwitchListSecondary() {
 
   return (
     <List
+      sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
       subheader={<ListSubheader>Settings</ListSubheader>}
-      className={classes.root}
     >
       <ListItem>
         <ListItemIcon>
diff --git a/docs/src/pages/components/lists/VirtualizedList.js b/docs/src/pages/components/lists/VirtualizedList.js
index 8022a854047fe4..5f3e6e68180c36 100644
--- a/docs/src/pages/components/lists/VirtualizedList.js
+++ b/docs/src/pages/components/lists/VirtualizedList.js
@@ -1,18 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import { FixedSizeList } from 'react-window';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    height: 400,
-    maxWidth: 360,
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 function renderRow(props) {
   const { index, style } = props;
 
@@ -24,10 +15,10 @@ function renderRow(props) {
 }
 
 export default function VirtualizedList() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{ width: '100%', height: 400, maxWidth: 360, bgcolor: 'background.paper' }}
+    >
       <FixedSizeList
         height={400}
         width={360}
@@ -37,6 +28,6 @@ export default function VirtualizedList() {
       >
         {renderRow}
       </FixedSizeList>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/lists/VirtualizedList.tsx b/docs/src/pages/components/lists/VirtualizedList.tsx
index 03680c93f0f4e2..2eae903741c8c4 100644
--- a/docs/src/pages/components/lists/VirtualizedList.tsx
+++ b/docs/src/pages/components/lists/VirtualizedList.tsx
@@ -1,20 +1,9 @@
 import * as React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      height: 400,
-      maxWidth: 360,
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
-
 function renderRow(props: ListChildComponentProps) {
   const { index, style } = props;
 
@@ -26,10 +15,10 @@ function renderRow(props: ListChildComponentProps) {
 }
 
 export default function VirtualizedList() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{ width: '100%', height: 400, maxWidth: 360, bgcolor: 'background.paper' }}
+    >
       <FixedSizeList
         height={400}
         width={360}
@@ -39,6 +28,6 @@ export default function VirtualizedList() {
       >
         {renderRow}
       </FixedSizeList>
-    </div>
+    </Box>
   );
 }