Use codemod jss-to-styled

components/navigasyon.js

@@ -2,7 +2,7 @@ import {useState} from 'react'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import AppBar from '@material-ui/core/AppBar'
 import Tabs from '@material-ui/core/Tabs'
 import Tab from '@material-ui/core/Tab'
@@ -13,6 +13,25 @@ import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
 import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
 
+const PREFIX = 'navigasyon'
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.root}`]: {
+    marginBottom: 50,
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.palette.background.paper
+  }
+}))
+
 const tabRouteHref = [
   '/',
   '/teks',
@@ -31,7 +50,7 @@ function TabPanel(props) {
   const {children, value, index, ...other} = props
 
   return (
-    <div
+    <Root
       role='tabpanel'
       hidden={value !== index}
       id={`scrollable-force-tabpanel-${index}`}
@@ -43,7 +62,7 @@ function TabPanel(props) {
           <Typography component='div'>{children}</Typography>
         </Box>
       )}
-    </div>
+    </Root>
   )
 }
 
@@ -60,18 +79,9 @@ function a11yProps(index) {
   }
 }
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    marginBottom: 50,
-    flexGrow: 1,
-    width: '100%',
-    backgroundColor: theme.palette.background.paper
-  }
-}))
-
 export default function Navigasyon({selectedTab}) {
   const router = useRouter()
-  const classes = useStyles()
+
   const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {