Use codemod jss-to-styled

components/awtis/awtis-kat.js

@@ -15,27 +15,43 @@ import {
 } from '@material-ui/core'
 
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
 import MizikLis from './mizik-lis'
 import AwtisBiyografi from './awtis-biyografi'
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'awtis-kat'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  media: `${PREFIX}-media`,
+  expand: `${PREFIX}-expand`,
+  expandOpen: `${PREFIX}-expandOpen`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     maxWidth: 345
   },
-  media: {
+
+  [`& .${classes.media}`]: {
     height: 240,
     objectFit: 'contain'
   },
-  expand: {
+
+  [`& .${classes.expand}`]: {
     transform: 'rotate(0deg)',
     marginLeft: 'auto',
     transition: theme.transitions.create('transform', {
       duration: theme.transitions.duration.shortest
     })
   },
-  expandOpen: {
+
+  [`& .${classes.expandOpen}`]: {
     transform: 'rotate(180deg)'
   }
 }))
@@ -45,7 +61,7 @@ export default function AwtisKat({anAwtis}) {
   const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'
 
   const {alias, biyografi, teks, foto} = anAwtis
-  const classes = useStyles()
+
   const [expanded, setExpanded] = useState(false)
 
   const handleExpandClick = () => {
@@ -57,56 +73,58 @@ export default function AwtisKat({anAwtis}) {
   }
 
   return (
-    <>
-      <Grid item xs={12} sm={6} lg={4}>
-        <Card className={classes.root}>
-          <CardActionArea onClick={handleClick}>
-            <CardMedia
-              className={classes.media}
-              component='img'
-              alt={alias}
-              image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
-              title={alias}
-            />
-            <CardContent>
-              <Typography gutterBottom align='center' variant='h5' component='h2'>
-                {alias}
-              </Typography>
-              <Typography align='center' variant='body2' color='textSecondary' component='h5'>
-                {anAwtis.teks.length} tèks
-              </Typography>
-            </CardContent>
-          </CardActionArea>
+    (
+      <Root>
+        <Grid item xs={12} sm={6} lg={4}>
+          <Card className={classes.root}>
+            <CardActionArea onClick={handleClick}>
+              <CardMedia
+                className={classes.media}
+                component='img'
+                alt={alias}
+                image={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
+                title={alias}
+              />
+              <CardContent>
+                <Typography gutterBottom align='center' variant='h5' component='h2'>
+                  {alias}
+                </Typography>
+                <Typography align='center' variant='body2' color='textSecondary' component='h5'>
+                  {anAwtis.teks.length} tèks
+                </Typography>
+              </CardContent>
+            </CardActionArea>
 
-          <CardActions disableSpacing>
-            <IconButton
-              className={clsx(classes.expand, {
-                [classes.expandOpen]: expanded
-              })}
-              aria-expanded={expanded}
-              aria-label='show more'
-              onClick={handleExpandClick}
-            >
-              <ExpandMoreIcon />
-            </IconButton>
-          </CardActions>
-          <Collapse unmountOnExit in={expanded} timeout='auto'>
-            <CardContent>
-              <MizikLis teks={teks} />
-            </CardContent>
-          </Collapse>
-        </Card>
-      </Grid>
-      {esByografiOuve && (
-        <AwtisBiyografi
-          alias={alias}
-          teks={teks}
-          biyografi={biyografi}
-          esByografiOuve={esByografiOuve}
-          meteEsByografiOuve={meteEsByografiOuve}
-        />
-      )}
-    </>
+            <CardActions disableSpacing>
+              <IconButton
+                className={clsx(classes.expand, {
+                  [classes.expandOpen]: expanded
+                })}
+                aria-expanded={expanded}
+                aria-label='show more'
+                onClick={handleExpandClick}
+              >
+                <ExpandMoreIcon />
+              </IconButton>
+            </CardActions>
+            <Collapse unmountOnExit in={expanded} timeout='auto'>
+              <CardContent>
+                <MizikLis teks={teks} />
+              </CardContent>
+            </Collapse>
+          </Card>
+        </Grid>
+        {esByografiOuve && (
+          <AwtisBiyografi
+            alias={alias}
+            teks={teks}
+            biyografi={biyografi}
+            esByografiOuve={esByografiOuve}
+            meteEsByografiOuve={meteEsByografiOuve}
+          />
+        )}
+      </Root>
+    )
   )
 }