[docs] Migrate Card demos to emotion (#25557)

mui · Mar 31, 2021 · fa475e2 · fa475e2
1 parent 5fe1289
commit fa475e2
Show file tree

Hide file tree

Showing 27 changed files with 211 additions and 411 deletions.
diff --git a/docs/src/pages/components/cards/ActionAreaCard.js b/docs/src/pages/components/cards/ActionAreaCard.js
@@ -1,36 +1,24 @@
 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"
         />
         <CardContent>
           <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
@@ -1,36 +1,24 @@
 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"
         />
         <CardContent>
           <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/.../src/pages/components/cards/SimpleCard.js → docs/src/pages/components/cards/BasicCard.js b/.../src/pages/components/cards/SimpleCard.js → 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/...src/pages/components/cards/SimpleCard.tsx → .../src/pages/components/cards/BasicCard.tsx b/...src/pages/components/cards/SimpleCard.tsx → .../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
@@ -1,23 +1,14 @@
 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';
 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
@@ -1,23 +1,14 @@
 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';
 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
@@ -1,36 +1,24 @@
 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';
 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"
       />
       <CardContent>
         <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
@@ -1,36 +1,24 @@
 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';
 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"
       />
       <CardContent>
         <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>