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>
   )
 }
 

components/soumet/ekri-teks.js

@@ -1,4 +1,5 @@
 import {useCallback, useEffect, useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import axios from 'axios'
 import {
@@ -16,14 +17,25 @@ import {
   Snackbar,
   TextField,
   Tooltip,
-  Typography,
-  withStyles
+  Typography
 } from '@material-ui/core'
 import MuiAlert from '@material-ui/lab/Alert'
 import CloseIcon from '@material-ui/icons/Close'
 
 import AjouteTradiksyon from './ajoute-tradiksyon'
 
+const PREFIX = 'EkriTeks'
+
+const classes = {
+  tooltip: `${PREFIX}-tooltip`
+}
+
+const StyledContainer = styled(Container)(() => ({
+  [`& .${classes.tooltip}`]: {
+    fontSize: 18
+  }
+}))
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 
 const textLabels = {
@@ -48,11 +60,7 @@ function Alert(props) {
   return <MuiAlert elevation={6} variant='filled' {...props} />
 }
 
-const RemoveTooltip = withStyles(() => ({
-  tooltip: {
-    fontSize: 18
-  }
-}))(Tooltip)
+const RemoveTooltip = Tooltip
 
 function EkriTeks({session}) {
   const {jwt, user} = session
@@ -160,7 +168,7 @@ function EkriTeks({session}) {
   }, [error])
 
   return (
-    <Container maxWidth='sm'>
+    <StyledContainer maxWidth='sm'>
       <Box align='center' marginBottom={2}>
         <Typography display='inline' variant='h5' component='h1'>
           Soumèt an tèks
@@ -224,7 +232,13 @@ function EkriTeks({session}) {
               rows={8}
               endAdornment={
                 <InputAdornment position='end'>
-                  <RemoveTooltip title='Effacer la traduction' placement='left'>
+                  <RemoveTooltip
+                    title='Effacer la traduction'
+                    placement='left'
+                    classes={{
+                      tooltip: classes.tooltip
+                    }}
+                  >
                     <IconButton
                       color='secondary'
                       style={{bottom: 75}}
@@ -273,7 +287,7 @@ function EkriTeks({session}) {
           </Alert>
         </Snackbar>
       )}
-    </Container>
+    </StyledContainer>
   )
 }