Use codemod jss-to-styled

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