Use codemod jss-to-styled

components/teks/teks-kat.js

@@ -11,20 +11,26 @@ import {
   Grid
 } from '@material-ui/core'
 import ExplicitIcon from '@material-ui/icons/Explicit'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
-const useStyles = makeStyles({
-  root: {
+const PREFIX = 'teks-kat'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  media: `${PREFIX}-media`
+}
+
+const StyledGrid = styled(Grid)({
+  [`& .${classes.root}`]: {
     maxWidth: 345
   },
-  media: {
+  [`& .${classes.media}`]: {
     height: 240,
     objectFit: 'contain'
   }
 })
 
 export default function TeksKat({teks}) {
-  const classes = useStyles()
   const router = useRouter()
   const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
   const {tit, awtis, lanne, kouveti, published_at, slug} = teks
@@ -35,7 +41,7 @@ export default function TeksKat({teks}) {
   }
 
   return (
-    <Grid item sm={12} md={6} lg={4}>
+    <StyledGrid item sm={12} md={6} lg={4}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
           <CardMedia
@@ -71,7 +77,7 @@ export default function TeksKat({teks}) {
           </CardContent>
         </CardActionArea>
       </Card>
-    </Grid>
+    </StyledGrid>
   )
 }