Use codemod jss-to-styled

components/teks/vwe-koute-achte.js

@@ -17,11 +17,17 @@ import VideocamIcon from '@material-ui/icons/Videocam'
 import MusicNoteIcon from '@material-ui/icons/MusicNote'
 import AlbumIcon from '@material-ui/icons/Album'
 import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'
 
-const useStyles = makeStyles(() => ({
-  root: {
+const PREFIX = 'vwe-koute-achte'
+
+const classes = {
+  root: `${PREFIX}-root`
+}
+
+const Root = styled('div')(() => ({
+  [`&.${classes.root}`]: {
     height: 0,
     transform: 'translateZ(0px)'
   }
@@ -47,7 +53,6 @@ const vweyIcons = {
 }
 
 export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
-  const classes = useStyles()
   const [ouve, meteOuve] = useState(false)
   const {kouteyAchtey, lyen} = anTeks
 
@@ -76,7 +81,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
   }
 
   return (
-    <div className={classes.root}>
+    <Root className={classes.root}>
       <SpeedDial
         color='secondary'
         FabProps={{size: 'small', margin: 'auto', color: 'default'}}
@@ -105,7 +110,7 @@ export default function VweKouteAchte({anTeks, niVideyo, niOdyo}) {
           />
         ))}
       </SpeedDial>
-    </div>
+    </Root>
   )
 }