Use codemod jss-to-styled

components/teks/denye-teks.js

@@ -1,15 +1,22 @@
-import {Container, Grid, makeStyles} from '@material-ui/core'
+import {Container, Grid} from '@material-ui/core'
+
+import {styled} from '@mui/material/styles'
 
 import TeksKat from './teks-kat'
 
-const useStyles = makeStyles(() => ({
-  container: {
+const PREFIX = 'denye-teks'
+
+const classes = {
+  container: `${PREFIX}-container`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.container}`]: {
     marginTop: '3em'
   }
 }))
 
 export default function DenyeTeks(teks) {
-  const classes = useStyles()
   const teksKlasePaPibilikasyon = Object.values(teks).sort((a, b) => {
     const aDate = new Date(a.published_at)
     const bDate = new Date(b.published_at)
@@ -17,12 +24,12 @@ export default function DenyeTeks(teks) {
   }).slice(0, 6)
 
   return (
-    <div className={classes.container}>
+    <Root className={classes.container}>
       <Container>
         <Grid container spacing={3}>
           {teksKlasePaPibilikasyon.map(t => <TeksKat key={t._id} teks={t} />)}
         </Grid>
       </Container>
-    </div>
+    </Root>
   )
 }