Use codemod jss-to-styled

components/rezo-menu.js

@@ -1,31 +1,27 @@
 import {useRef, useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {Button, ListItemIcon, ListItemText, Menu, MenuItem, withStyles} from '@material-ui/core'
+import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@material-ui/core'
 import PublicIcon from '@material-ui/icons/Public'
 
-const StyledMenu = withStyles({
-  paper: {
-    border: '1px solid #d3d4d5'
-  }
-})(props => (
-  <Menu
-    elevation={0}
-    getContentAnchorEl={null}
-    anchorOrigin={{
-      vertical: 'bottom',
-      horizontal: 'center'
-    }}
-    transformOrigin={{
-      vertical: 'top',
-      horizontal: 'center'
-    }}
-    {...props}
-  />
-))
+const PREFIX = 'rezo-menu'
 
-const StyledMenuItem = withStyles(theme => ({
-  root: {
+const classes = {
+  paper: `${PREFIX}-paper`,
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.paper}`]: {
+    border: '1px solid #d3d4d5'
+  },
+
+  [`& .${classes.root}`]: {
     '&:hover': {
       backgroundColor: theme.palette.primary.main,
       '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
@@ -33,7 +29,27 @@ const StyledMenuItem = withStyles(theme => ({
       }
     }
   }
-}))(MenuItem)
+}))
+
+function StyledMenu(props) {
+  return (
+    <Menu
+      elevation={0}
+      getContentAnchorEl={null}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center'
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center'
+      }}
+      {...props}
+    />
+  )
+}
+
+const StyledMenuItem = MenuItem
 
 const siteDomain = process.env.NEXT_PUBLIC_PROD_DOMAIN || 'localhost'
 
@@ -57,36 +73,47 @@ export default function RezoMenu({data}) {
   }
 
   return (
-    <>
-      <Button
-        ref={anchorRef}
-        startIcon={<PublicIcon />}
-        size='small'
-        aria-controls='customized-menu'
-        aria-haspopup='true'
-        variant='contained'
-        color='primary'
-        onClick={handleClick}
-      >
-        Rézo
-      </Button>
-      <StyledMenu
-        keepMounted
-        id='customized-menu'
-        anchorEl={anchorElement}
-        open={Boolean(anchorElement)}
-        onClose={handleClose}
-      >
-        {data.map(({id, tit, icon, link}) => (
-          <StyledMenuItem key={id} onClick={() => handleClose(id, link)}>
-            <ListItemIcon>
-              {icon}
-            </ListItemIcon>
-            <ListItemText primary={tit} />
-          </StyledMenuItem>
-        ))}
-      </StyledMenu>
-    </>
+    (
+      <Root>
+        <Button
+          ref={anchorRef}
+          startIcon={<PublicIcon />}
+          size='small'
+          aria-controls='customized-menu'
+          aria-haspopup='true'
+          variant='contained'
+          color='primary'
+          onClick={handleClick}
+        >
+          Rézo
+        </Button>
+        <StyledMenu
+          keepMounted
+          id='customized-menu'
+          anchorEl={anchorElement}
+          open={Boolean(anchorElement)}
+          classes={{
+            paper: classes.paper
+          }}
+          onClose={handleClose}
+        >
+          {data.map(({id, tit, icon, link}) => (
+            <StyledMenuItem
+              key={id}
+              classes={{
+                root: classes.root
+              }}
+              onClick={() => handleClose(id, link)}
+            >
+              <ListItemIcon>
+                {icon}
+              </ListItemIcon>
+              <ListItemText primary={tit} />
+            </StyledMenuItem>
+          ))}
+        </StyledMenu>
+      </Root>
+    )
   )
 }