Use codemod jss-to-styled

components/teks/drawer-bar.js

@@ -1,4 +1,5 @@
 import {useState} from 'react'
+import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import union from 'lodash.union'
 import deburr from 'lodash.deburr'
@@ -7,23 +8,38 @@ import {
   Divider,
   FormControl,
   InputAdornment,
-  InputBase,
-  makeStyles
+  InputBase
 } from '@material-ui/core'
 
 import SearchIcon from '@material-ui/icons/Search'
 
 import MizikLis from '../awtis/mizik-lis'
 
-const useStyles = makeStyles(theme => ({
-  toolbar: theme.mixins.toolbar,
-  list: {
+const PREFIX = 'drawer-bar'
+
+const classes = {
+  toolbar: `${PREFIX}-toolbar`,
+  list: `${PREFIX}-list`,
+  form: `${PREFIX}-form`,
+  text: `${PREFIX}-text`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`& .${classes.toolbar}`]: theme.mixins.toolbar,
+
+  [`& .${classes.list}`]: {
     marginBottom: '6em'
   },
-  form: {
+
+  [`& .${classes.form}`]: {
     marginLeft: theme.spacing(1)
   },
-  text: {
+
+  [`& .${classes.text}`]: {
     marginBottom: '0.5em'
   }
 }))
@@ -46,7 +62,6 @@ const getMizikFiltered = (teks, filter) => {
 
 export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
   const slug = anTeks ? anTeks.slug : null
-  const classes = useStyles()
 
   const [search, setSearch] = useState('')
   const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
@@ -60,7 +75,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
   }
 
   return (
-    <div className='search'>
+    <Root className='search'>
       <FormControl className={classes.form}>
         <InputBase
           className={classes.toolbar}
@@ -84,7 +99,7 @@ export default function DrawerBar({meteEsMobilOuve, teks, anTeks}) {
           meteSlugTeksChwazi={meteSlugTeksChwazi}
         />
       </div>
-    </div>
+    </Root>
   )
 }