Use codemod jss-to-styled

components/cgu/cgu-dialog.js

@@ -1,19 +1,25 @@
 import {useRef, useEffect} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {Button, Dialog, DialogActions, DialogContent, DialogTitle, makeStyles, Typography} from '@material-ui/core'
+import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@material-ui/core'
 import {useRouter} from 'next/router'
 import Cgu from '.'
 
-const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
+const PREFIX = 'cgu-dialog'
 
-const useStyles = makeStyles(() => ({
-  dialog: {
+const classes = {
+  dialog: `${PREFIX}-dialog`
+}
+
+const Root = styled('div')(() => ({
+  [`& .${classes.dialog}`]: {
     zIndex: 9999
   }
 }))
 
+const CGU_DOWNLOAD_LINK = process.env.NEXT_PUBLIC_CGU_DOWNLOAD_LINK
+
 export default function CGUDialog({open, setOpen}) {
-  const classes = useStyles()
   const router = useRouter()
 
   const handleClose = () => {
@@ -36,7 +42,7 @@ export default function CGUDialog({open, setOpen}) {
   }, [open])
 
   return (
-    <div>
+    <Root>
       <Dialog
         open={open}
         scroll='paper'
@@ -65,7 +71,7 @@ export default function CGUDialog({open, setOpen}) {
           </Button>
         </DialogActions>
       </Dialog>
-    </div>
+    </Root>
   )
 }
 

components/cgu/index.js

@@ -1,17 +1,22 @@
-import {List, ListItem, ListItemText, Link, makeStyles, Typography, ListItemIcon} from '@material-ui/core'
+import {List, ListItem, ListItemText, Link, Typography, ListItemIcon} from '@material-ui/core'
+import {styled} from '@mui/material/styles'
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'
 
-const useStyles = makeStyles({
-  root: {
+const PREFIX = 'index'
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')({
+  [`&.${classes.root}`]: {
     textAlign: 'justify'
   }
 })
 
 export default function Cgu() {
-  const classes = useStyles()
-
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Typography gutterBottom variant='h5' component='h2'>
         Définitions
       </Typography>
@@ -436,6 +441,6 @@ export default function Cgu() {
       <Typography gutterBottom variant='caption' >
         Dernières modifications le 15/06/2021
       </Typography>
-    </div>
+    </Root>
   )
 }