Use codemod jss-to-styled

components/komante/komante-list.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
 import {
   Typography,
@@ -12,22 +12,32 @@ import {
 
 import {formatJsonString} from '../../lib/utils/format'
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'komante-list'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  inline: `${PREFIX}-inline`
+}
+
+const StyledList = styled(List)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     width: '100%',
     maxWidth: '36ch',
     backgroundColor: theme.palette.background.paper
   },
-  inline: {
+
+  [`& .${classes.inline}`]: {
     display: 'inline'
   }
 }))
 
 export default function KomanteList({komante}) {
-  const classes = useStyles()
-
   return (
-    <List className={classes.root}>
+    <StyledList className={classes.root}>
       {komante.map(({_id, username, kontni, sentAt}) => (
         <div key={_id}>
           <ListItemText
@@ -48,7 +58,7 @@ export default function KomanteList({komante}) {
           <Divider style={{marginBottom: '1em'}} />
         </div>
       ))}
-    </List>
+    </StyledList>
   )
 }
 

components/komante/vwe-komante.js

@@ -1,4 +1,5 @@
 import {useState, useEffect, useRef} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {useSession} from 'next-auth/client'
 
@@ -11,9 +12,7 @@ import {
   Button,
   Typography,
   Tooltip,
-  Zoom,
-  withStyles,
-  makeStyles
+  Zoom
 } from '@material-ui/core'
 import AddCommentIcon from '@material-ui/icons/AddComment'
 import {useRouter} from 'next/router'
@@ -21,23 +20,31 @@ import Koneksyon from '../sesyon/koneksyon'
 import KomanteList from './komante-list'
 import EkriKomante from './ekri-komante'
 
-const useStyles = makeStyles(theme => ({
-  margin: {
+const PREFIX = 'vwe-komante'
+
+const classes = {
+  tooltip: `${PREFIX}-tooltip`,
+  margin: `${PREFIX}-margin`,
+  extendedIcon: `${PREFIX}-extendedIcon`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.margin}`]: {
     margin: theme.spacing(1)
   },
-  extendedIcon: {
+
+  [`& .${classes.extendedIcon}`]: {
     marginRight: theme.spacing(1)
   }
 }))
 
-const KomanteTooltip = withStyles(() => ({
-  tooltip: {
-    fontSize: 18
-  }
-}))(Tooltip)
+const KomanteTooltip = Tooltip
 
 export default function VweKomante({komante, teks}) {
-  const classes = useStyles()
   const [esOuve, meteEsOuve] = useState(false)
   const [esKoneksyonOuve, meteEsKoneksyonOuve] = useState(false)
   const [esKomenteOuve, meteEsKomanteOuve] = useState(false)
@@ -63,66 +70,75 @@ export default function VweKomante({komante, teks}) {
   }, [esOuve])
 
   return (
-    <>
-      <KomanteTooltip title='Komantè' placement='bottom' TransitionComponent={Zoom}>
-        <IconButton className={classes.margin} color='primary' aria-label='commentaire' component='span' onClick={handleClick}>
-          <AddCommentIcon />
-        </IconButton>
-      </KomanteTooltip>
-      <Dialog
-        open={esOuve}
-        scroll='paper'
-        aria-labelledby='scroll-dialog-title'
-        aria-describedby='scroll-dialog-description'
-        onClose={handleClose}
-      >
-        <DialogTitle align='center' id='scroll-dialog-title'>Kòmantè</DialogTitle>
-        <DialogContent dividers>
-          <Typography
-            ref={descriptionElementRef}
-            variant='inherit'
-            id='scroll-dialog-description'
-            tabIndex={-1}
-          >
-            {komante.length > 0 ? (
-              <KomanteList komante={komante} />
-            ) : (
-              <Typography align='center'>
-                Aucun
-              </Typography>
+    (
+      <Root>
+        <KomanteTooltip
+          title='Komantè'
+          placement='bottom'
+          TransitionComponent={Zoom}
+          classes={{
+            tooltip: classes.tooltip
+          }}
+        >
+          <IconButton className={classes.margin} color='primary' aria-label='commentaire' component='span' onClick={handleClick}>
+            <AddCommentIcon />
+          </IconButton>
+        </KomanteTooltip>
+        <Dialog
+          open={esOuve}
+          scroll='paper'
+          aria-labelledby='scroll-dialog-title'
+          aria-describedby='scroll-dialog-description'
+          onClose={handleClose}
+        >
+          <DialogTitle align='center' id='scroll-dialog-title'>Kòmantè</DialogTitle>
+          <DialogContent dividers>
+            <Typography
+              ref={descriptionElementRef}
+              variant='inherit'
+              id='scroll-dialog-description'
+              tabIndex={-1}
+            >
+              {komante.length > 0 ? (
+                <KomanteList komante={komante} />
+              ) : (
+                <Typography align='center'>
+                  Aucun
+                </Typography>
+              )}
+            </Typography>
+          </DialogContent>
+          <DialogActions align='center' >
+            {session && session.user && !esKomenteOuve && (
+              <Button fullWidth color='primary' onClick={() => meteEsKomanteOuve(true)}>
+                Ajouter un commentaire
+              </Button>
             )}
-          </Typography>
-        </DialogContent>
-        <DialogActions align='center' >
-          {session && session.user && !esKomenteOuve && (
-            <Button fullWidth color='primary' onClick={() => meteEsKomanteOuve(true)}>
-              Ajouter un commentaire
-            </Button>
-          )}
-          {!session && !esKoneksyonOuve && (
-            <Button fullWidth color='primary' onClick={() => meteEsKoneksyonOuve(true)}>
-              Se connecter pour commenter
-            </Button>
-          )}
+            {!session && !esKoneksyonOuve && (
+              <Button fullWidth color='primary' onClick={() => meteEsKoneksyonOuve(true)}>
+                Se connecter pour commenter
+              </Button>
+            )}
+            {!session && esKoneksyonOuve && (
+              <Koneksyon chimen={router.asPath} />
+            )}
+          </DialogActions>
           {!session && esKoneksyonOuve && (
-            <Koneksyon chimen={router.asPath} />
-          )}
-        </DialogActions>
-        {!session && esKoneksyonOuve && (
-          <Button style={{marginBottom: 10}} color='primary' onClick={() => meteEsKoneksyonOuve(false)}>
-            Annuler
-          </Button>
-        )}
-        {session && session.user && esKomenteOuve && (
-          <>
-            <EkriKomante session={session} teks={teks} meteEsKomanteOuve={meteEsKomanteOuve} />
-            <Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
-              Fermer
+            <Button style={{marginBottom: 10}} color='primary' onClick={() => meteEsKoneksyonOuve(false)}>
+              Annuler
             </Button>
-          </>
-        )}
-      </Dialog>
-    </>
+          )}
+          {session && session.user && esKomenteOuve && (
+            <>
+              <EkriKomante session={session} teks={teks} meteEsKomanteOuve={meteEsKomanteOuve} />
+              <Button fullWidth style={{marginBottom: 10}} color='primary' onClick={() => meteEsKomanteOuve(false)}>
+                Fermer
+              </Button>
+            </>
+          )}
+        </Dialog>
+      </Root>
+    )
   )
 }