Use codemod jss-to-styled

components/kat-kay-la.js

@@ -7,31 +7,39 @@ import {
   Typography,
   Grid
 } from '@material-ui/core'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
-const useStyles = makeStyles({
-  root: {
+const PREFIX = 'kat-kay-la'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  bullet: `${PREFIX}-bullet`,
+  title: `${PREFIX}-title`,
+  pos: `${PREFIX}-pos`
+}
+
+const StyledGrid = styled(Grid)({
+  [`& .${classes.root}`]: {
     minWidth: 275
   },
-  bullet: {
+  [`& .${classes.bullet}`]: {
     display: 'inline-block',
     margin: '0 2px',
     transform: 'scale(0.8)'
   },
-  title: {
+  [`& .${classes.title}`]: {
     fontSize: 14
   },
-  pos: {
+  [`& .${classes.pos}`]: {
     marginBottom: 12
   }
 })
 
 export default function KatKayLa({tit, soutit, kantite, route}) {
-  const classes = useStyles()
   const router = useRouter()
 
   return (
-    <Grid item xs={12} md={6}>
+    <StyledGrid item xs={12} md={6}>
       <Card className={classes.root} variant='outlined'>
         <CardActionArea onClick={() => router.push(route).then(() => window.scrollTo(0, 0))}>
           <CardContent>
@@ -47,7 +55,7 @@ export default function KatKayLa({tit, soutit, kantite, route}) {
           </CardContent>
         </CardActionArea>
       </Card>
-    </Grid>
+    </StyledGrid>
   )
 }