From 794c5c85fe119ac6391e71d358354fa975b676ed Mon Sep 17 00:00:00 2001
From: Lucas <lucas_s.s@hotmail.com>
Date: Wed, 2 Oct 2019 05:20:42 -0300
Subject: [PATCH 1/2] replace ImgMediaCard demo to styled components

---
 docs/src/pages/components/cards/ImgMediaCard.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/components/cards/ImgMediaCard.js b/docs/src/pages/components/cards/ImgMediaCard.js
index 8b900f47bf99e2..9131a0a0648952 100644
--- a/docs/src/pages/components/cards/ImgMediaCard.js
+++ b/docs/src/pages/components/cards/ImgMediaCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardActions from '@material-ui/core/CardActions';
@@ -8,17 +8,13 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  card: {
-    maxWidth: 345,
-  },
-});
+const StyledCard = styled(Card)`
+  max-width: 345px;
+`;
 
 export default function ImgMediaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.card}>
+    <StyledCard>
       <CardActionArea>
         <CardMedia
           component="img"
@@ -45,6 +41,6 @@ export default function ImgMediaCard() {
           Learn More
         </Button>
       </CardActions>
-    </Card>
+    </StyledCard>
   );
 }

From d755b5b25440133479a50b9b047d05fc3c3847bc Mon Sep 17 00:00:00 2001
From: Lucas <lucas_s.s@hotmail.com>
Date: Wed, 2 Oct 2019 05:22:04 -0300
Subject: [PATCH 2/2] replace ImgMediaCard ts to styled component

---
 docs/src/pages/components/cards/ImgMediaCard.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/docs/src/pages/components/cards/ImgMediaCard.tsx b/docs/src/pages/components/cards/ImgMediaCard.tsx
index 8b900f47bf99e2..9131a0a0648952 100644
--- a/docs/src/pages/components/cards/ImgMediaCard.tsx
+++ b/docs/src/pages/components/cards/ImgMediaCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import styled from 'styled-components';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardActions from '@material-ui/core/CardActions';
@@ -8,17 +8,13 @@ import CardMedia from '@material-ui/core/CardMedia';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  card: {
-    maxWidth: 345,
-  },
-});
+const StyledCard = styled(Card)`
+  max-width: 345px;
+`;
 
 export default function ImgMediaCard() {
-  const classes = useStyles();
-
   return (
-    <Card className={classes.card}>
+    <StyledCard>
       <CardActionArea>
         <CardMedia
           component="img"
@@ -45,6 +41,6 @@ export default function ImgMediaCard() {
           Learn More
         </Button>
       </CardActions>
-    </Card>
+    </StyledCard>
   );
 }