Use codemod jss-to-styled

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