Use codemod jss-to-styled

components/sesyon/dekoneksyon.js

@@ -1,30 +1,33 @@
 import {useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 import {signOut} from 'next-auth/client'
-import {withStyles, makeStyles, Tooltip, Fab, Zoom} from '@material-ui/core'
+import {Tooltip, Fab, Zoom} from '@material-ui/core'
 import ExitToAppIcon from '@material-ui/icons/ExitToApp'
 
 import Alet from '../alet'
 
-const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+const PREFIX = 'Dekoneksyon'
 
-const useStyles = makeStyles(() => ({
-  dekoneksyon: {
+const classes = {
+  tooltip: `${PREFIX}-tooltip`,
+  dekoneksyon: `${PREFIX}-dekoneksyon`
+}
+
+const Root = styled('div')(() => ({
+  [`& .${classes.dekoneksyon}`]: {
     position: props => props.position,
     top: props => props.top,
     left: props => props.left
   }
 }))
 
-const DekoneksonTooltip = withStyles(() => ({
-  tooltip: {
-    fontSize: 18
-  }
-}))(Tooltip)
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 
-function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
-  const classes = useStyles(props)
+const DekoneksonTooltip = Tooltip
+
+function Dekoneksyon({chimen, tooltipPlacement}) {
   const [esOuve, meteEsOuve] = useState(false)
 
   const handleDekonekte = event => {
@@ -33,22 +36,31 @@ function Dekoneksyon({chimen, tooltipPlacement, ...props}) {
   }
 
   return (
-    <>
-      <Link passHref href='/api/auth/signout'>
-        <DekoneksonTooltip title='Dékoneksyon' placement={tooltipPlacement} TransitionComponent={Zoom}>
-          <Fab
-            className={classes.dekoneksyon}
-            color='secondary'
-            aria-label='logout'
-            size='small'
-            onClick={() => meteEsOuve(true)}
+    (
+      <Root>
+        <Link passHref href='/api/auth/signout'>
+          <DekoneksonTooltip
+            title='Dékoneksyon'
+            placement={tooltipPlacement}
+            TransitionComponent={Zoom}
+            classes={{
+              tooltip: classes.tooltip
+            }}
           >
-            <ExitToAppIcon />
-          </Fab>
-        </DekoneksonTooltip>
-      </Link>
-      <Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={handleDekonekte} />
-    </>
+            <Fab
+              className={classes.dekoneksyon}
+              color='secondary'
+              aria-label='logout'
+              size='small'
+              onClick={() => meteEsOuve(true)}
+            >
+              <ExitToAppIcon />
+            </Fab>
+          </DekoneksonTooltip>
+        </Link>
+        <Alet esOuve={esOuve} meteEsOuve={meteEsOuve} handleKonfime={handleDekonekte} />
+      </Root>
+    )
   )
 }