Use codemod jss-to-styled

components/awtis/mizik-badj-meni.js

@@ -13,20 +13,31 @@ import {
   Badge
 } from '@material-ui/core'
 
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import MenuBookIcon from '@material-ui/icons/MenuBook'
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'mizik-badj-meni'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  paper: `${PREFIX}-paper`
+}
+
+const Root = styled('div')((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     display: 'flex'
   },
-  paper: {
+
+  [`& .${classes.paper}`]: {
     marginRight: theme.spacing(2)
   }
 }))
 
 export default function MizikBadjMeni({teks}) {
-  const classes = useStyles()
   const [open, setOpen] = useState(false)
   const anchorRef = useRef(null)
   const router = useRouter()
@@ -64,7 +75,7 @@ export default function MizikBadjMeni({teks}) {
   }, [open])
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <Button
         ref={anchorRef}
         aria-controls={open ? 'menu-list-grow' : undefined}
@@ -98,7 +109,7 @@ export default function MizikBadjMeni({teks}) {
           </Grow>
         )}
       </Popper>
-    </div>
+    </Root>
   )
 }