Use codemod jss-to-styled

components/switch-theme.js

@@ -1,17 +1,25 @@
 import PropTypes from 'prop-types'
+import {styled} from '@mui/material/styles'
 import WbSunnyIcon from '@material-ui/icons/WbSunny'
 import Brightness3Icon from '@material-ui/icons/Brightness3'
-import {Box, makeStyles} from '@material-ui/core'
+import {Box} from '@material-ui/core'
 
-const useStyles = makeStyles({
-  switch: {
+const PREFIX = 'switch-theme'
+
+const classes = {
+  switch: `${PREFIX}-switch`,
+  switchFixed: `${PREFIX}-switchFixed`
+}
+
+const StyledBox = styled(Box)({
+  [`& .${classes.switch}`]: {
     position: 'absolute',
     right: '1em',
-    top: '95px',
+    top: '200px',
     zIndex: 1,
     cursor: 'pointer'
   },
-  switchFixed: {
+  [`& .${classes.switchFixed}`]: {
     position: 'fixed',
     right: '1em',
     top: '95px',
@@ -21,20 +29,19 @@ const useStyles = makeStyles({
 })
 
 export default function SwitchTheme({switchFixed, darkMode, setDarkMode}) {
-  const classes = useStyles()
   const handleClick = () => {
     localStorage.setItem('oki-dark', !darkMode)
     setDarkMode(!darkMode)
   }
 
   return (
-    <Box className={switchFixed ? classes.switchFixed : classes.switch}>
+    <StyledBox className={switchFixed ? classes.switchFixed : classes.switch}>
       {darkMode ? (
         <WbSunnyIcon onClick={handleClick} />
       ) : (
         <Brightness3Icon onClick={handleClick} />
       )}
-    </Box>
+    </StyledBox>
   )
 }