Use codemod jss-to-styled

components/soumet/ajoute-tradiksyon.js

@@ -1,30 +1,26 @@
 import {useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {MenuItem, withStyles, Menu, Button} from '@material-ui/core'
+import {MenuItem, Menu, Button} from '@material-ui/core'
 import {uniq} from 'lodash'
 
-const StyledMenu = withStyles({
-  paper: {
-    border: '1px solid #d3d4d5'
-  }
-})(props => (
-  <Menu
-    elevation={0}
-    getContentAnchorEl={null}
-    anchorOrigin={{
-      vertical: 'top',
-      horizontal: 'center'
-    }}
-    transformOrigin={{
-      vertical: 'bottom',
-      horizontal: 'center'
-    }}
-    {...props}
-  />
-))
+const PREFIX = 'AjouteTradiksyon'
 
-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}`]: {
     '&:focus': {
       backgroundColor: theme.palette.primary.main,
       '& .MuiListItemIcon-root, & .MuiListItemText-primary': {
@@ -32,7 +28,27 @@ const StyledMenuItem = withStyles(theme => ({
       }
     }
   }
-}))(MenuItem)
+}))
+
+function StyledMenu(props) {
+  return (
+    <Menu
+      elevation={0}
+      getContentAnchorEl={null}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'center'
+      }}
+      transformOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center'
+      }}
+      {...props}
+    />
+  )
+}
+
+const StyledMenuItem = MenuItem
 
 function AjouteTradiksyon({chwaLang, setChwaLang}) {
   const [anchorElement, setAnchorElement] = useState(null)
@@ -48,7 +64,7 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
   }
 
   return (
-    <div style={{textAlign: 'center', marginTop: 5}}>
+    <Root style={{textAlign: 'center', marginTop: 5}}>
       <Button
         aria-controls='lang-menu'
         variant='outlined'
@@ -62,13 +78,34 @@ function AjouteTradiksyon({chwaLang, setChwaLang}) {
         id='lang-menu'
         anchorEl={anchorElement}
         open={Boolean(anchorElement)}
+        classes={{
+          paper: classes.paper
+        }}
         onClose={handleClose}
       >
-        <StyledMenuItem id='fr' onClick={handleClose}>🇫🇷 Français</StyledMenuItem>
-        <StyledMenuItem id='en' onClick={handleClose}>🇬🇧 English</StyledMenuItem>
-        <StyledMenuItem id='es' onClick={handleClose}>🇪🇸 Español</StyledMenuItem>
+        <StyledMenuItem
+          id='fr'
+          classes={{
+            root: classes.root
+          }}
+          onClick={handleClose}
+        >🇫🇷 Français</StyledMenuItem>
+        <StyledMenuItem
+          id='en'
+          classes={{
+            root: classes.root
+          }}
+          onClick={handleClose}
+        >🇬🇧 English</StyledMenuItem>
+        <StyledMenuItem
+          id='es'
+          classes={{
+            root: classes.root
+          }}
+          onClick={handleClose}
+        >🇪🇸 Español</StyledMenuItem>
       </StyledMenu>
-    </div>
+    </Root>
   )
 }