From fa475e270b5e121c550d41f3141ff5181dbb13f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Casas?=
 <57921784+vicasas@users.noreply.github.com>
Date: Wed, 31 Mar 2021 09:40:29 -0300
Subject: [PATCH] [docs] Migrate Card demos to emotion (#25557)

---
 .../pages/components/cards/ActionAreaCard.js  | 18 +----
 .../pages/components/cards/ActionAreaCard.tsx | 18 +----
 .../cards/{SimpleCard.js => BasicCard.js}     | 39 ++++------
 .../cards/{SimpleCard.tsx => BasicCard.tsx}   | 39 ++++------
 .../pages/components/cards/ImgMediaCard.js    | 13 +---
 .../pages/components/cards/ImgMediaCard.tsx   | 13 +---
 docs/src/pages/components/cards/MediaCard.js  | 18 +----
 docs/src/pages/components/cards/MediaCard.tsx | 18 +----
 .../components/cards/MediaControlCard.js      | 48 +++---------
 .../components/cards/MediaControlCard.tsx     | 50 +++---------
 .../components/cards/MultiActionAreaCard.js   | 18 +----
 .../components/cards/MultiActionAreaCard.tsx  | 18 +----
 .../pages/components/cards/OutlinedCard.js    | 77 +++++++++----------
 .../pages/components/cards/OutlinedCard.tsx   | 77 +++++++++----------
 .../components/cards/RecipeReviewCard.js      | 53 +++++--------
 .../components/cards/RecipeReviewCard.tsx     | 61 ++++++---------
 docs/src/pages/components/cards/cards.md      |  4 +-
 .../BackdropUnstyled/BackdropUnstyled.test.js |  4 +-
 .../src/BadgeUnstyled/BadgeUnstyled.test.js   |  4 +-
 .../src/ModalUnstyled/ModalUnstyled.test.js   |  4 +-
 .../material-ui-utils/src/integerPropType.js  |  4 +-
 .../src/StepContent/StepContent.test.js       |  4 +-
 .../src/TableBody/TableBody.test.js           |  4 +-
 .../src/TableCell/TableCell.test.js           |  4 +-
 .../src/TableFooter/TableFooter.test.js       |  4 +-
 .../src/TableHead/TableHead.test.js           |  4 +-
 .../material-ui/src/TableRow/TableRow.test.js |  4 +-
 27 files changed, 211 insertions(+), 411 deletions(-)
 rename docs/src/pages/components/cards/{SimpleCard.js => BasicCard.js} (53%)
 rename docs/src/pages/components/cards/{SimpleCard.tsx => BasicCard.tsx} (53%)

diff --git a/docs/src/pages/components/cards/ActionAreaCard.js b/docs/src/pages/components/cards/ActionAreaCard.js
index 8cab1394755909..76ce7885e58731 100644
--- a/docs/src/pages/components/cards/ActionAreaCard.js
+++ b/docs/src/pages/components/cards/ActionAreaCard.js
@@ -1,28 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import { CardActionArea } from '@material-ui/core';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 140,
-  },
-});
-
 export default function ActionAreaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardActionArea>
         <CardMedia
-          className={classes.media}
+          sx={{ height: 140 }}
           image="/static/images/cards/contemplative-reptile.jpg"
           title="Contemplative Reptile"
         />
@@ -30,7 +18,7 @@ export default function ActionAreaCard() {
           <Typography gutterBottom variant="h5" component="div">
             Lizard
           </Typography>
-          <Typography variant="body2" color="textSecondary" component="p">
+          <Typography variant="body2" color="text.secondary">
             Lizards are a widespread group of squamate reptiles, with over 6,000
             species, ranging across all continents except Antarctica
           </Typography>
diff --git a/docs/src/pages/components/cards/ActionAreaCard.tsx b/docs/src/pages/components/cards/ActionAreaCard.tsx
index 8cab1394755909..76ce7885e58731 100644
--- a/docs/src/pages/components/cards/ActionAreaCard.tsx
+++ b/docs/src/pages/components/cards/ActionAreaCard.tsx
@@ -1,28 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import { CardActionArea } from '@material-ui/core';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 140,
-  },
-});
-
 export default function ActionAreaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardActionArea>
         <CardMedia
-          className={classes.media}
+          sx={{ height: 140 }}
           image="/static/images/cards/contemplative-reptile.jpg"
           title="Contemplative Reptile"
         />
@@ -30,7 +18,7 @@ export default function ActionAreaCard() {
           <Typography gutterBottom variant="h5" component="div">
             Lizard
           </Typography>
-          <Typography variant="body2" color="textSecondary" component="p">
+          <Typography variant="body2" color="text.secondary">
             Lizards are a widespread group of squamate reptiles, with over 6,000
             species, ranging across all continents except Antarctica
           </Typography>
diff --git a/docs/src/pages/components/cards/SimpleCard.js b/docs/src/pages/components/cards/BasicCard.js
similarity index 53%
rename from docs/src/pages/components/cards/SimpleCard.js
rename to docs/src/pages/components/cards/BasicCard.js
index 581969e0c339a1..8be56a2ca35ea7 100644
--- a/docs/src/pages/components/cards/SimpleCard.js
+++ b/docs/src/pages/components/cards/BasicCard.js
@@ -1,45 +1,34 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)',
-  },
-  title: {
-    fontSize: 14,
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
-export default function SimpleCard() {
-  const classes = useStyles();
-  const bull = <span className={classes.bullet}>•</span>;
+const bull = (
+  <Box
+    component="span"
+    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
+  >
+    •
+  </Box>
+);
 
+export default function BasicCard() {
   return (
-    <Card className={classes.root}>
+    <Card sx={{ minWidth: 275 }}>
       <CardContent>
-        <Typography className={classes.title} color="textSecondary" gutterBottom>
+        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
           Word of the Day
         </Typography>
         <Typography variant="h5" component="div">
           be{bull}nev{bull}o{bull}lent
         </Typography>
-        <Typography className={classes.pos} color="textSecondary">
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
           adjective
         </Typography>
-        <Typography variant="body2" component="p">
+        <Typography variant="body2">
           well meaning and kindly.
           <br />
           {'"a benevolent smile"'}
diff --git a/docs/src/pages/components/cards/SimpleCard.tsx b/docs/src/pages/components/cards/BasicCard.tsx
similarity index 53%
rename from docs/src/pages/components/cards/SimpleCard.tsx
rename to docs/src/pages/components/cards/BasicCard.tsx
index 581969e0c339a1..8be56a2ca35ea7 100644
--- a/docs/src/pages/components/cards/SimpleCard.tsx
+++ b/docs/src/pages/components/cards/BasicCard.tsx
@@ -1,45 +1,34 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)',
-  },
-  title: {
-    fontSize: 14,
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
-
-export default function SimpleCard() {
-  const classes = useStyles();
-  const bull = <span className={classes.bullet}>•</span>;
+const bull = (
+  <Box
+    component="span"
+    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
+  >
+    •
+  </Box>
+);
 
+export default function BasicCard() {
   return (
-    <Card className={classes.root}>
+    <Card sx={{ minWidth: 275 }}>
       <CardContent>
-        <Typography className={classes.title} color="textSecondary" gutterBottom>
+        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
           Word of the Day
         </Typography>
         <Typography variant="h5" component="div">
           be{bull}nev{bull}o{bull}lent
         </Typography>
-        <Typography className={classes.pos} color="textSecondary">
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
           adjective
         </Typography>
-        <Typography variant="body2" component="p">
+        <Typography variant="body2">
           well meaning and kindly.
           <br />
           {'"a benevolent smile"'}
diff --git a/docs/src/pages/components/cards/ImgMediaCard.js b/docs/src/pages/components/cards/ImgMediaCard.js
index 53cbea20961f49..50aec506880b72 100644
--- a/docs/src/pages/components/cards/ImgMediaCard.js
+++ b/docs/src/pages/components/cards/ImgMediaCard.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
@@ -7,17 +6,9 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-});
-
 export default function ImgMediaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardMedia
         component="img"
         alt="Contemplative Reptile"
@@ -29,7 +20,7 @@ export default function ImgMediaCard() {
         <Typography gutterBottom variant="h5" component="div">
           Lizard
         </Typography>
-        <Typography variant="body2" color="textSecondary" component="p">
+        <Typography variant="body2" color="text.secondary">
           Lizards are a widespread group of squamate reptiles, with over 6,000
           species, ranging across all continents except Antarctica
         </Typography>
diff --git a/docs/src/pages/components/cards/ImgMediaCard.tsx b/docs/src/pages/components/cards/ImgMediaCard.tsx
index 53cbea20961f49..50aec506880b72 100644
--- a/docs/src/pages/components/cards/ImgMediaCard.tsx
+++ b/docs/src/pages/components/cards/ImgMediaCard.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
@@ -7,17 +6,9 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-});
-
 export default function ImgMediaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardMedia
         component="img"
         alt="Contemplative Reptile"
@@ -29,7 +20,7 @@ export default function ImgMediaCard() {
         <Typography gutterBottom variant="h5" component="div">
           Lizard
         </Typography>
-        <Typography variant="body2" color="textSecondary" component="p">
+        <Typography variant="body2" color="text.secondary">
           Lizards are a widespread group of squamate reptiles, with over 6,000
           species, ranging across all continents except Antarctica
         </Typography>
diff --git a/docs/src/pages/components/cards/MediaCard.js b/docs/src/pages/components/cards/MediaCard.js
index 5b14ac4f3b11d3..c7050772900eb3 100644
--- a/docs/src/pages/components/cards/MediaCard.js
+++ b/docs/src/pages/components/cards/MediaCard.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
@@ -7,22 +6,11 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 140,
-  },
-});
-
 export default function MediaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardMedia
-        className={classes.media}
+        sx={{ height: 140 }}
         image="/static/images/cards/contemplative-reptile.jpg"
         title="Contemplative Reptile"
       />
@@ -30,7 +18,7 @@ export default function MediaCard() {
         <Typography gutterBottom variant="h5" component="div">
           Lizard
         </Typography>
-        <Typography variant="body2" color="textSecondary" component="p">
+        <Typography variant="body2" color="text.secondary">
           Lizards are a widespread group of squamate reptiles, with over 6,000
           species, ranging across all continents except Antarctica
         </Typography>
diff --git a/docs/src/pages/components/cards/MediaCard.tsx b/docs/src/pages/components/cards/MediaCard.tsx
index 5b14ac4f3b11d3..c7050772900eb3 100644
--- a/docs/src/pages/components/cards/MediaCard.tsx
+++ b/docs/src/pages/components/cards/MediaCard.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
@@ -7,22 +6,11 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 140,
-  },
-});
-
 export default function MediaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardMedia
-        className={classes.media}
+        sx={{ height: 140 }}
         image="/static/images/cards/contemplative-reptile.jpg"
         title="Contemplative Reptile"
       />
@@ -30,7 +18,7 @@ export default function MediaCard() {
         <Typography gutterBottom variant="h5" component="div">
           Lizard
         </Typography>
-        <Typography variant="body2" color="textSecondary" component="p">
+        <Typography variant="body2" color="text.secondary">
           Lizards are a widespread group of squamate reptiles, with over 6,000
           species, ranging across all continents except Antarctica
         </Typography>
diff --git a/docs/src/pages/components/cards/MediaControlCard.js b/docs/src/pages/components/cards/MediaControlCard.js
index 48d8374b0dd5a1..b82848ed94d7ca 100644
--- a/docs/src/pages/components/cards/MediaControlCard.js
+++ b/docs/src/pages/components/cards/MediaControlCard.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
@@ -9,61 +10,34 @@ import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-  },
-  details: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  content: {
-    flex: '1 0 auto',
-  },
-  cover: {
-    width: 151,
-  },
-  controls: {
-    display: 'flex',
-    alignItems: 'center',
-    paddingLeft: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-  },
-  playIcon: {
-    height: 38,
-    width: 38,
-  },
-}));
-
 export default function MediaControlCard() {
-  const classes = useStyles();
   const theme = useTheme();
 
   return (
-    <Card className={classes.root}>
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
+    <Card sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <CardContent sx={{ flex: '1 0 auto' }}>
           <Typography component="div" variant="h5">
             Live From Space
           </Typography>
-          <Typography variant="subtitle1" color="textSecondary" component="div">
+          <Typography variant="subtitle1" color="text.secondary" component="div">
             Mac Miller
           </Typography>
         </CardContent>
-        <div className={classes.controls}>
+        <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
           <IconButton aria-label="previous">
             {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
           </IconButton>
           <IconButton aria-label="play/pause">
-            <PlayArrowIcon className={classes.playIcon} />
+            <PlayArrowIcon sx={{ height: 38, width: 38 }} />
           </IconButton>
           <IconButton aria-label="next">
             {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
           </IconButton>
-        </div>
-      </div>
+        </Box>
+      </Box>
       <CardMedia
-        className={classes.cover}
+        sx={{ width: 151 }}
         image="/static/images/cards/live-from-space.jpg"
         title="Live from space album cover"
       />
diff --git a/docs/src/pages/components/cards/MediaControlCard.tsx b/docs/src/pages/components/cards/MediaControlCard.tsx
index 8b72c55c13b636..b82848ed94d7ca 100644
--- a/docs/src/pages/components/cards/MediaControlCard.tsx
+++ b/docs/src/pages/components/cards/MediaControlCard.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Theme, createStyles, makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
@@ -9,63 +10,34 @@ import SkipPreviousIcon from '@material-ui/icons/SkipPrevious';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-    },
-    details: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    content: {
-      flex: '1 0 auto',
-    },
-    cover: {
-      width: 151,
-    },
-    controls: {
-      display: 'flex',
-      alignItems: 'center',
-      paddingLeft: theme.spacing(1),
-      paddingBottom: theme.spacing(1),
-    },
-    playIcon: {
-      height: 38,
-      width: 38,
-    },
-  }),
-);
-
 export default function MediaControlCard() {
-  const classes = useStyles();
   const theme = useTheme();
 
   return (
-    <Card className={classes.root}>
-      <div className={classes.details}>
-        <CardContent className={classes.content}>
+    <Card sx={{ display: 'flex' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <CardContent sx={{ flex: '1 0 auto' }}>
           <Typography component="div" variant="h5">
             Live From Space
           </Typography>
-          <Typography variant="subtitle1" color="textSecondary" component="div">
+          <Typography variant="subtitle1" color="text.secondary" component="div">
             Mac Miller
           </Typography>
         </CardContent>
-        <div className={classes.controls}>
+        <Box sx={{ display: 'flex', alignItems: 'center', pl: 1, pb: 1 }}>
           <IconButton aria-label="previous">
             {theme.direction === 'rtl' ? <SkipNextIcon /> : <SkipPreviousIcon />}
           </IconButton>
           <IconButton aria-label="play/pause">
-            <PlayArrowIcon className={classes.playIcon} />
+            <PlayArrowIcon sx={{ height: 38, width: 38 }} />
           </IconButton>
           <IconButton aria-label="next">
             {theme.direction === 'rtl' ? <SkipPreviousIcon /> : <SkipNextIcon />}
           </IconButton>
-        </div>
-      </div>
+        </Box>
+      </Box>
       <CardMedia
-        className={classes.cover}
+        sx={{ width: 151 }}
         image="/static/images/cards/live-from-space.jpg"
         title="Live from space album cover"
       />
diff --git a/docs/src/pages/components/cards/MultiActionAreaCard.js b/docs/src/pages/components/cards/MultiActionAreaCard.js
index 1039d261eab159..11c8eb94dbf8e2 100644
--- a/docs/src/pages/components/cards/MultiActionAreaCard.js
+++ b/docs/src/pages/components/cards/MultiActionAreaCard.js
@@ -1,28 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import { Button, CardActionArea, CardActions } from '@material-ui/core';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 140,
-  },
-});
-
 export default function MultiActionAreaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardActionArea>
         <CardMedia
-          className={classes.media}
+          sx={{ height: 140 }}
           image="/static/images/cards/contemplative-reptile.jpg"
           title="Contemplative Reptile"
         />
@@ -30,7 +18,7 @@ export default function MultiActionAreaCard() {
           <Typography gutterBottom variant="h5" component="div">
             Lizard
           </Typography>
-          <Typography variant="body2" color="textSecondary" component="p">
+          <Typography variant="body2" color="text.secondary">
             Lizards are a widespread group of squamate reptiles, with over 6,000
             species, ranging across all continents except Antarctica
           </Typography>
diff --git a/docs/src/pages/components/cards/MultiActionAreaCard.tsx b/docs/src/pages/components/cards/MultiActionAreaCard.tsx
index 1039d261eab159..11c8eb94dbf8e2 100644
--- a/docs/src/pages/components/cards/MultiActionAreaCard.tsx
+++ b/docs/src/pages/components/cards/MultiActionAreaCard.tsx
@@ -1,28 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
 import { Button, CardActionArea, CardActions } from '@material-ui/core';
 
-const useStyles = makeStyles({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 140,
-  },
-});
-
 export default function MultiActionAreaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardActionArea>
         <CardMedia
-          className={classes.media}
+          sx={{ height: 140 }}
           image="/static/images/cards/contemplative-reptile.jpg"
           title="Contemplative Reptile"
         />
@@ -30,7 +18,7 @@ export default function MultiActionAreaCard() {
           <Typography gutterBottom variant="h5" component="div">
             Lizard
           </Typography>
-          <Typography variant="body2" color="textSecondary" component="p">
+          <Typography variant="body2" color="text.secondary">
             Lizards are a widespread group of squamate reptiles, with over 6,000
             species, ranging across all continents except Antarctica
           </Typography>
diff --git a/docs/src/pages/components/cards/OutlinedCard.js b/docs/src/pages/components/cards/OutlinedCard.js
index 77873441a2d0e2..4bfd24ae28b193 100644
--- a/docs/src/pages/components/cards/OutlinedCard.js
+++ b/docs/src/pages/components/cards/OutlinedCard.js
@@ -1,53 +1,48 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)',
-  },
-  title: {
-    fontSize: 14,
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
+const bull = (
+  <Box
+    component="span"
+    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
+  >
+    •
+  </Box>
+);
 
-export default function OutlinedCard() {
-  const classes = useStyles();
-  const bull = <span className={classes.bullet}>•</span>;
+const card = (
+  <React.Fragment>
+    <CardContent>
+      <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+        Word of the Day
+      </Typography>
+      <Typography variant="h5" component="div">
+        be{bull}nev{bull}o{bull}lent
+      </Typography>
+      <Typography sx={{ mb: 1.5 }} color="text.secondary">
+        adjective
+      </Typography>
+      <Typography variant="body2">
+        well meaning and kindly.
+        <br />
+        {'"a benevolent smile"'}
+      </Typography>
+    </CardContent>
+    <CardActions>
+      <Button size="small">Learn More</Button>
+    </CardActions>
+  </React.Fragment>
+);
 
+export default function OutlinedCard() {
   return (
-    <Card className={classes.root} variant="outlined">
-      <CardContent>
-        <Typography className={classes.title} color="textSecondary" gutterBottom>
-          Word of the Day
-        </Typography>
-        <Typography variant="h5" component="div">
-          be{bull}nev{bull}o{bull}lent
-        </Typography>
-        <Typography className={classes.pos} color="textSecondary">
-          adjective
-        </Typography>
-        <Typography variant="body2" component="p">
-          well meaning and kindly.
-          <br />
-          {'"a benevolent smile"'}
-        </Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="small">Learn More</Button>
-      </CardActions>
-    </Card>
+    <Box sx={{ minWidth: 275 }}>
+      <Card variant="outlined">{card}</Card>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/cards/OutlinedCard.tsx b/docs/src/pages/components/cards/OutlinedCard.tsx
index 77873441a2d0e2..4bfd24ae28b193 100644
--- a/docs/src/pages/components/cards/OutlinedCard.tsx
+++ b/docs/src/pages/components/cards/OutlinedCard.tsx
@@ -1,53 +1,48 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    minWidth: 275,
-  },
-  bullet: {
-    display: 'inline-block',
-    margin: '0 2px',
-    transform: 'scale(0.8)',
-  },
-  title: {
-    fontSize: 14,
-  },
-  pos: {
-    marginBottom: 12,
-  },
-});
+const bull = (
+  <Box
+    component="span"
+    sx={{ display: 'inline-block', mx: '2px', transform: 'scale(0.8)' }}
+  >
+    •
+  </Box>
+);
 
-export default function OutlinedCard() {
-  const classes = useStyles();
-  const bull = <span className={classes.bullet}>•</span>;
+const card = (
+  <React.Fragment>
+    <CardContent>
+      <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+        Word of the Day
+      </Typography>
+      <Typography variant="h5" component="div">
+        be{bull}nev{bull}o{bull}lent
+      </Typography>
+      <Typography sx={{ mb: 1.5 }} color="text.secondary">
+        adjective
+      </Typography>
+      <Typography variant="body2">
+        well meaning and kindly.
+        <br />
+        {'"a benevolent smile"'}
+      </Typography>
+    </CardContent>
+    <CardActions>
+      <Button size="small">Learn More</Button>
+    </CardActions>
+  </React.Fragment>
+);
 
+export default function OutlinedCard() {
   return (
-    <Card className={classes.root} variant="outlined">
-      <CardContent>
-        <Typography className={classes.title} color="textSecondary" gutterBottom>
-          Word of the Day
-        </Typography>
-        <Typography variant="h5" component="div">
-          be{bull}nev{bull}o{bull}lent
-        </Typography>
-        <Typography className={classes.pos} color="textSecondary">
-          adjective
-        </Typography>
-        <Typography variant="body2" component="p">
-          well meaning and kindly.
-          <br />
-          {'"a benevolent smile"'}
-        </Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="small">Learn More</Button>
-      </CardActions>
-    </Card>
+    <Box sx={{ minWidth: 275 }}>
+      <Card variant="outlined">{card}</Card>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js
index ab390648613776..b63e3e95bcb94f 100644
--- a/docs/src/pages/components/cards/RecipeReviewCard.js
+++ b/docs/src/pages/components/cards/RecipeReviewCard.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardMedia from '@material-ui/core/CardMedia';
@@ -16,31 +15,18 @@ import ShareIcon from '@material-ui/icons/Share';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    maxWidth: 345,
-  },
-  media: {
-    height: 0,
-    paddingTop: '56.25%', // 16:9
-  },
-  expand: {
-    transform: 'rotate(0deg)',
-    marginLeft: 'auto',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.shortest,
-    }),
-  },
-  expandOpen: {
-    transform: 'rotate(180deg)',
-  },
-  avatar: {
-    backgroundColor: red[500],
-  },
+const ExpandMore = styled((props) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
 }));
 
 export default function RecipeReviewCard() {
-  const classes = useStyles();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -48,10 +34,10 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardHeader
         avatar={
-          <Avatar aria-label="recipe" className={classes.avatar}>
+          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
             R
           </Avatar>
         }
@@ -64,12 +50,15 @@ export default function RecipeReviewCard() {
         subheader="September 14, 2016"
       />
       <CardMedia
-        className={classes.media}
+        sx={{
+          height: 0,
+          paddingTop: '56.25%', // 16:9
+        }}
         image="/static/images/cards/paella.jpg"
         title="Paella dish"
       />
       <CardContent>
-        <Typography variant="body2" color="textSecondary" component="p">
+        <Typography variant="body2" color="text.secondary">
           This impressive paella is a perfect party dish and a fun meal to cook
           together with your guests. Add 1 cup of frozen peas along with the mussels,
           if you like.
@@ -82,16 +71,14 @@ export default function RecipeReviewCard() {
         <IconButton aria-label="share">
           <ShareIcon />
         </IconButton>
-        <IconButton
-          className={clsx(classes.expand, {
-            [classes.expandOpen]: expanded,
-          })}
+        <ExpandMore
+          expand={expanded}
           onClick={handleExpandClick}
           aria-expanded={expanded}
           aria-label="show more"
         >
           <ExpandMoreIcon />
-        </IconButton>
+        </ExpandMore>
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
diff --git a/docs/src/pages/components/cards/RecipeReviewCard.tsx b/docs/src/pages/components/cards/RecipeReviewCard.tsx
index f2757e34508d70..7ce90bdb53e97b 100644
--- a/docs/src/pages/components/cards/RecipeReviewCard.tsx
+++ b/docs/src/pages/components/cards/RecipeReviewCard.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardMedia from '@material-ui/core/CardMedia';
@@ -8,7 +7,7 @@ import CardContent from '@material-ui/core/CardContent';
 import CardActions from '@material-ui/core/CardActions';
 import Collapse from '@material-ui/core/Collapse';
 import Avatar from '@material-ui/core/Avatar';
-import IconButton from '@material-ui/core/IconButton';
+import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import { red } from '@material-ui/core/colors';
 import FavoriteIcon from '@material-ui/icons/Favorite';
@@ -16,33 +15,22 @@ import ShareIcon from '@material-ui/icons/Share';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      maxWidth: 345,
-    },
-    media: {
-      height: 0,
-      paddingTop: '56.25%', // 16:9
-    },
-    expand: {
-      transform: 'rotate(0deg)',
-      marginLeft: 'auto',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shortest,
-      }),
-    },
-    expandOpen: {
-      transform: 'rotate(180deg)',
-    },
-    avatar: {
-      backgroundColor: red[500],
-    },
+interface ExpandMoreProps extends IconButtonProps {
+  expand: boolean;
+}
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
   }),
-);
+}));
 
 export default function RecipeReviewCard() {
-  const classes = useStyles();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -50,10 +38,10 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.root}>
+    <Card sx={{ maxWidth: 345 }}>
       <CardHeader
         avatar={
-          <Avatar aria-label="recipe" className={classes.avatar}>
+          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
             R
           </Avatar>
         }
@@ -66,12 +54,15 @@ export default function RecipeReviewCard() {
         subheader="September 14, 2016"
       />
       <CardMedia
-        className={classes.media}
+        sx={{
+          height: 0,
+          paddingTop: '56.25%', // 16:9
+        }}
         image="/static/images/cards/paella.jpg"
         title="Paella dish"
       />
       <CardContent>
-        <Typography variant="body2" color="textSecondary" component="p">
+        <Typography variant="body2" color="text.secondary">
           This impressive paella is a perfect party dish and a fun meal to cook
           together with your guests. Add 1 cup of frozen peas along with the mussels,
           if you like.
@@ -84,16 +75,14 @@ export default function RecipeReviewCard() {
         <IconButton aria-label="share">
           <ShareIcon />
         </IconButton>
-        <IconButton
-          className={clsx(classes.expand, {
-            [classes.expandOpen]: expanded,
-          })}
+        <ExpandMore
+          expand={expanded}
           onClick={handleExpandClick}
           aria-expanded={expanded}
           aria-label="show more"
         >
           <ExpandMoreIcon />
-        </IconButton>
+        </ExpandMore>
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
diff --git a/docs/src/pages/components/cards/cards.md b/docs/src/pages/components/cards/cards.md
index b0d6efb8e47530..fbe0429a175a77 100644
--- a/docs/src/pages/components/cards/cards.md
+++ b/docs/src/pages/components/cards/cards.md
@@ -15,11 +15,11 @@ They should be easy to scan for relevant and actionable information. Elements, l
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Simple card
+## Basic card
 
 Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
 
-{{"demo": "pages/components/cards/SimpleCard.js", "bg": true}}
+{{"demo": "pages/components/cards/BasicCard.js", "bg": true}}
 
 ### Outlined Card
 
diff --git a/packages/material-ui-unstyled/src/BackdropUnstyled/BackdropUnstyled.test.js b/packages/material-ui-unstyled/src/BackdropUnstyled/BackdropUnstyled.test.js
index 9cf0b971874e85..82a1282e56aeca 100644
--- a/packages/material-ui-unstyled/src/BackdropUnstyled/BackdropUnstyled.test.js
+++ b/packages/material-ui-unstyled/src/BackdropUnstyled/BackdropUnstyled.test.js
@@ -27,10 +27,10 @@ describe('<BackdropUnstyled />', () => {
     let theme = null;
 
     const Root = React.forwardRef(
-      ({ styleProps: stylePropsProp, theme: themeProp, ...rest }, ref) => {
+      ({ styleProps: stylePropsProp, theme: themeProp, ...other }, ref) => {
         styleProps = stylePropsProp;
         theme = themeProp;
-        return <span ref={ref} {...rest} />;
+        return <span ref={ref} {...other} />;
       },
     );
 
diff --git a/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.test.js b/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.test.js
index 0e6e4b8044f47e..c97b3c7e1a5525 100644
--- a/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.test.js
+++ b/packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.test.js
@@ -27,10 +27,10 @@ describe('<BadgeUnstyled />', () => {
     let theme = null;
 
     const Root = React.forwardRef(
-      ({ styleProps: stylePropsProp, theme: themeProp, ...rest }, ref) => {
+      ({ styleProps: stylePropsProp, theme: themeProp, ...other }, ref) => {
         styleProps = stylePropsProp;
         theme = themeProp;
-        return <span ref={ref} {...rest} />;
+        return <span ref={ref} {...other} />;
       },
     );
 
diff --git a/packages/material-ui-unstyled/src/ModalUnstyled/ModalUnstyled.test.js b/packages/material-ui-unstyled/src/ModalUnstyled/ModalUnstyled.test.js
index 071cb48b22428f..019705d845fc47 100644
--- a/packages/material-ui-unstyled/src/ModalUnstyled/ModalUnstyled.test.js
+++ b/packages/material-ui-unstyled/src/ModalUnstyled/ModalUnstyled.test.js
@@ -37,10 +37,10 @@ describe('<ModalUnstyled />', () => {
     let theme = null;
 
     const Root = React.forwardRef(
-      ({ styleProps: stylePropsProp, theme: themeProp, ...rest }, ref) => {
+      ({ styleProps: stylePropsProp, theme: themeProp, ...other }, ref) => {
         styleProps = stylePropsProp;
         theme = themeProp;
-        return <span ref={ref} {...rest} />;
+        return <span ref={ref} {...other} />;
       },
     );
 
diff --git a/packages/material-ui-utils/src/integerPropType.js b/packages/material-ui-utils/src/integerPropType.js
index ef6475f7c4acb4..99105c3d03cd79 100644
--- a/packages/material-ui-utils/src/integerPropType.js
+++ b/packages/material-ui-utils/src/integerPropType.js
@@ -46,14 +46,14 @@ function requiredInteger(props, propName, componentName, location) {
   return null;
 }
 
-function validator(props, propName, ...rest) {
+function validator(props, propName, ...other) {
   const propValue = props[propName];
 
   if (propValue === undefined) {
     return null;
   }
 
-  return requiredInteger(props, propName, ...rest);
+  return requiredInteger(props, propName, ...other);
 }
 
 function validatorNoop() {
diff --git a/packages/material-ui/src/StepContent/StepContent.test.js b/packages/material-ui/src/StepContent/StepContent.test.js
index d339e5543002ce..64453f8d5ef115 100644
--- a/packages/material-ui/src/StepContent/StepContent.test.js
+++ b/packages/material-ui/src/StepContent/StepContent.test.js
@@ -24,12 +24,12 @@ describe('<StepContent />', () => {
     muiName: 'MuiStepContent',
     refInstanceof: window.HTMLDivElement,
     render: (node) => {
-      const { container, ...rest } = render(
+      const { container, ...other } = render(
         <Stepper orientation="vertical">
           <Step>{node}</Step>
         </Stepper>,
       );
-      return { container: container.firstChild.firstChild, ...rest };
+      return { container: container.firstChild.firstChild, ...other };
     },
     skip: ['componentProp', 'componentsProp', 'themeVariants', 'reactTestRenderer'],
   }));
diff --git a/packages/material-ui/src/TableBody/TableBody.test.js b/packages/material-ui/src/TableBody/TableBody.test.js
index d464769e32bc84..b853fc7d026a35 100644
--- a/packages/material-ui/src/TableBody/TableBody.test.js
+++ b/packages/material-ui/src/TableBody/TableBody.test.js
@@ -21,8 +21,8 @@ describe('<TableBody />', () => {
       return wrapper.find('table').childAt(0);
     },
     render: (node) => {
-      const { container, ...rest } = render(<table>{node}</table>);
-      return { container: container.firstChild, ...rest };
+      const { container, ...other } = render(<table>{node}</table>);
+      return { container: container.firstChild, ...other };
     },
     muiName: 'MuiTableBody',
     testVariantProps: { variant: 'foo' },
diff --git a/packages/material-ui/src/TableCell/TableCell.test.js b/packages/material-ui/src/TableCell/TableCell.test.js
index d9396b4fd1bfea..bcef3d3c64cf58 100644
--- a/packages/material-ui/src/TableCell/TableCell.test.js
+++ b/packages/material-ui/src/TableCell/TableCell.test.js
@@ -21,14 +21,14 @@ describe('<TableCell />', () => {
     classes,
     inheritComponent: 'td',
     render: (node) => {
-      const { container, ...rest } = render(
+      const { container, ...other } = render(
         <table>
           <tbody>
             <tr>{node}</tr>
           </tbody>
         </table>,
       );
-      return { container: container.firstChild.firstChild.firstChild, ...rest };
+      return { container: container.firstChild.firstChild.firstChild, ...other };
     },
     mount: (node) => {
       const wrapper = mount(
diff --git a/packages/material-ui/src/TableFooter/TableFooter.test.js b/packages/material-ui/src/TableFooter/TableFooter.test.js
index 181e77658666bd..548e65a2deaacf 100644
--- a/packages/material-ui/src/TableFooter/TableFooter.test.js
+++ b/packages/material-ui/src/TableFooter/TableFooter.test.js
@@ -17,8 +17,8 @@ describe('<TableFooter />', () => {
     classes,
     inheritComponent: 'tfoot',
     render: (node) => {
-      const { container, ...rest } = render(<table>{node}</table>);
-      return { container: container.firstChild, ...rest };
+      const { container, ...other } = render(<table>{node}</table>);
+      return { container: container.firstChild, ...other };
     },
     mount: (node) => {
       const wrapper = mount(<table>{node}</table>);
diff --git a/packages/material-ui/src/TableHead/TableHead.test.js b/packages/material-ui/src/TableHead/TableHead.test.js
index b5924a1618fd68..93e508fa704a1f 100644
--- a/packages/material-ui/src/TableHead/TableHead.test.js
+++ b/packages/material-ui/src/TableHead/TableHead.test.js
@@ -20,8 +20,8 @@ describe('<TableHead />', () => {
       return wrapper.find('table').childAt(0);
     },
     render: (node) => {
-      const { container, ...rest } = render(<table>{node}</table>);
-      return { container: container.firstChild, ...rest };
+      const { container, ...other } = render(<table>{node}</table>);
+      return { container: container.firstChild, ...other };
     },
     muiName: 'MuiTableHead',
     testVariantProps: { variant: 'foo' },
diff --git a/packages/material-ui/src/TableRow/TableRow.test.js b/packages/material-ui/src/TableRow/TableRow.test.js
index 4abbbd36cfcde1..b5d4247b95da53 100644
--- a/packages/material-ui/src/TableRow/TableRow.test.js
+++ b/packages/material-ui/src/TableRow/TableRow.test.js
@@ -20,12 +20,12 @@ describe('<TableRow />', () => {
     classes,
     inheritComponent: 'tr',
     render: (node) => {
-      const { container, ...rest } = render(
+      const { container, ...other } = render(
         <table>
           <tbody>{node}</tbody>
         </table>,
       );
-      return { container: container.firstChild.firstChild, ...rest };
+      return { container: container.firstChild.firstChild, ...other };
     },
     mount: (node) => {
       const wrapper = mount(