Use codemod jss-to-styled

components/footer.js

@@ -1,35 +1,49 @@
 import {useState} from 'react'
-import {Container, Link, makeStyles, Typography} from '@material-ui/core'
+import {styled} from '@mui/material/styles'
+import {Container, Link, Typography} from '@material-ui/core'
 import CGUDialog from './cgu/cgu-dialog'
 
-const useStyles = makeStyles(theme => ({
-  footer: {
+const PREFIX = 'footer'
+
+const classes = {
+  footer: `${PREFIX}-footer`,
+  text: `${PREFIX}-text`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.footer}`]: {
     padding: theme.spacing(3, 2),
     marginTop: 'auto',
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
   },
-  text: {
+
+  [`& .${classes.text}`]: {
     fontWeight: 'bold'
   }
 }))
 
 export default function Footer() {
-  const classes = useStyles()
   const [open, setOpen] = useState(false)
 
   return (
-    <>
-      <CGUDialog open={open} setOpen={setOpen} />
-      <footer id='cgu' className={classes.footer}>
-        <Container>
-          <Typography className={classes.text} align='center' variant='body1'>
-            <Link href='#cgu' onClick={() => setOpen(true)}>
-              Voir les CGU et la politique de confidentialité
-            </Link>
-          </Typography>
-        </Container>
-      </footer>
-    </>
+    (
+      <Root>
+        <CGUDialog open={open} setOpen={setOpen} />
+        <footer id='cgu' className={classes.footer}>
+          <Container>
+            <Typography className={classes.text} align='center' variant='body1'>
+              <Link href='#cgu' onClick={() => setOpen(true)}>
+                Voir les CGU et la politique de confidentialité
+              </Link>
+            </Typography>
+          </Container>
+        </footer>
+      </Root>
+    )
   )
 }