Use codemod jss-to-styled

components/awtis/mizik-lis.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import {List, ListItem, ListItemText} from '@material-ui/core'
 import FiberNewOutlinedIcon from '@material-ui/icons/FiberNewOutlined'
 import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
@@ -9,8 +9,18 @@ import ExplicitIcon from '@material-ui/icons/Explicit'
 
 import {esBrandNew} from '../../lib/date'
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'mizik-lis'
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const StyledList = styled(List)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     width: '100%',
     maxWidth: 360,
     backgroundColor: theme.palette.background.paper
@@ -18,7 +28,6 @@ const useStyles = makeStyles(theme => ({
 }))
 
 export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) {
-  const classes = useStyles()
   const router = useRouter()
 
   const handleClick = slug => {
@@ -40,7 +49,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
   }
 
   return (
-    <List component='nav' className={classes.root} aria-label='mizik'>
+    <StyledList component='nav' className={classes.root} aria-label='mizik'>
       {teks.map(({slug, tit, awtis, published_at, okiMizikID, eksplisit}) => (
         <ListItem
           key={slug}
@@ -61,7 +70,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
           )}
         </ListItem>
       ))}
-    </List>
+    </StyledList>
   )
 }