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>
+    )
   )
 }
 

components/awtis/mizik-badj-meni.js

@@ -13,20 +13,31 @@ import {
   Badge
 } from '@material-ui/core'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import MenuBookIcon from '@material-ui/icons/MenuBook'
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'mizik-badj-meni'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  paper: `${PREFIX}-paper`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     display: 'flex'
   },
-  paper: {
+
+  [`& .${classes.paper}`]: {
     marginRight: theme.spacing(2)
   }
 }))
 
 export default function MizikBadjMeni({teks}) {
-  const classes = useStyles()
   const [open, setOpen] = useState(false)
   const anchorRef = useRef(null)
   const router = useRouter()
@@ -64,7 +75,7 @@ export default function MizikBadjMeni({teks}) {
   }, [open])
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Button
         ref={anchorRef}
         aria-controls={open ? 'menu-list-grow' : undefined}
@@ -98,7 +109,7 @@ export default function MizikBadjMeni({teks}) {
           </Grow>
         )}
       </Popper>
-    </div>
+    </Root>
   )
 }
 

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>
   )
 }
 

components/awtis/pajinasyon.js

@@ -1,11 +1,21 @@
 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 Pagination from '@material-ui/lab/Pagination'
 import {Grid} from '@material-ui/core'
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'pajinasyon'
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const StyledGrid = styled(Grid)((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
     '& > *': {
       marginBottom: theme.spacing(2)
     }
@@ -14,7 +24,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function Pajinasyon({pajTotal, paj}) {
   const router = useRouter()
-  const classes = useStyles()
+
   const handleChange = (event, value) => {
     const href = `/awtis?paj&paj=${value}`
     const as = `/awtis/paj/${value}`
@@ -22,11 +32,11 @@ export default function Pajinasyon({pajTotal, paj}) {
   }
 
   return (
-    <Grid container justify='center'>
+    <StyledGrid container justify='center'>
       <div className={classes.root}>
         <Pagination size='small' page={paj} count={pajTotal} color='primary' onChange={handleChange} />
       </div>
-    </Grid>
+    </StyledGrid>
   )
 }