[docs] Use style root convention

mui · Jan 27, 2020 · 20cd5cb · 20cd5cb
1 parent 109c763
commit 20cd5cb
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 24 deletions.
diff --git a/docs/src/pages/components/cards/ImgMediaCard.js b/docs/src/pages/components/cards/ImgMediaCard.js
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
 });
@@ -18,7 +18,7 @@ export default function ImgMediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           component="img"

diff --git a/docs/src/pages/components/cards/ImgMediaCard.tsx b/docs/src/pages/components/cards/ImgMediaCard.tsx
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
 });
@@ -18,7 +18,7 @@ export default function ImgMediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           component="img"

diff --git a/docs/src/pages/components/cards/MediaCard.js b/docs/src/pages/components/cards/MediaCard.js
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -21,7 +21,7 @@ export default function MediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           className={classes.media}

diff --git a/docs/src/pages/components/cards/MediaCard.tsx b/docs/src/pages/components/cards/MediaCard.tsx
@@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -21,7 +21,7 @@ export default function MediaCard() {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardActionArea>
         <CardMedia
           className={classes.media}

diff --git a/docs/src/pages/components/cards/MediaControlCard.js b/docs/src/pages/components/cards/MediaControlCard.js
@@ -10,7 +10,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 
 const useStyles = makeStyles(theme => ({
-  card: {
+  root: {
     display: 'flex',
   },
   details: {
@@ -40,7 +40,7 @@ export default function MediaControlCard() {
   const theme = useTheme();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
           <Typography component="h5" variant="h5">

diff --git a/docs/src/pages/components/cards/MediaControlCard.tsx b/docs/src/pages/components/cards/MediaControlCard.tsx
@@ -11,7 +11,7 @@ import SkipNextIcon from '@material-ui/icons/SkipNext';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    card: {
+    root: {
       display: 'flex',
     },
     details: {
@@ -42,7 +42,7 @@ export default function MediaControlCard() {
   const theme = useTheme();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <div className={classes.details}>
         <CardContent className={classes.content}>
           <Typography component="h5" variant="h5">

diff --git a/docs/src/pages/components/cards/OutlinedCard.js b/docs/src/pages/components/cards/OutlinedCard.js
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function OutlinedCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card} variant="outlined">
+    <Card className={classes.root} variant="outlined">
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day

diff --git a/docs/src/pages/components/cards/OutlinedCard.tsx b/docs/src/pages/components/cards/OutlinedCard.tsx
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function OutlinedCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card} variant="outlined">
+    <Card className={classes.root} variant="outlined">
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day

diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js
@@ -17,7 +17,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const useStyles = makeStyles(theme => ({
-  card: {
+  root: {
     maxWidth: 345,
   },
   media: {
@@ -48,7 +48,7 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>

diff --git a/docs/src/pages/components/cards/RecipeReviewCard.tsx b/docs/src/pages/components/cards/RecipeReviewCard.tsx
@@ -18,7 +18,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    card: {
+    root: {
       maxWidth: 345,
     },
     media: {
@@ -50,7 +50,7 @@ export default function RecipeReviewCard() {
   };
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>

diff --git a/docs/src/pages/components/cards/SimpleCard.js b/docs/src/pages/components/cards/SimpleCard.js
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function SimpleCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day

diff --git a/docs/src/pages/components/cards/SimpleCard.tsx b/docs/src/pages/components/cards/SimpleCard.tsx
@@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles({
-  card: {
+  root: {
     minWidth: 275,
   },
   bullet: {
@@ -28,7 +28,7 @@ export default function SimpleCard() {
   const bull = <span className={classes.bullet}>•</span>;
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.root}>
       <CardContent>
         <Typography className={classes.title} color="textSecondary" gutterBottom>
           Word of the Day