Use codemod jss-to-styled

components/komante/komante-list.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {makeStyles} from '@material-ui/core/styles'
+import {styled} from '@material-ui/core/styles'
 
 import {
   Typography,
@@ -12,22 +12,32 @@ import {
 
 import {formatJsonString} from '../../lib/utils/format'
 
-const useStyles = makeStyles(theme => ({
-  root: {
+const PREFIX = 'komante-list'
+
+const classes = {
+  root: `${PREFIX}-root`,
+  inline: `${PREFIX}-inline`
+}
+
+const StyledList = styled(List)((
+  {
+    theme
+  }
+) => ({
+  [`&.${classes.root}`]: {
     width: '100%',
     maxWidth: '36ch',
     backgroundColor: theme.palette.background.paper
   },
-  inline: {
+
+  [`& .${classes.inline}`]: {
     display: 'inline'
   }
 }))
 
 export default function KomanteList({komante}) {
-  const classes = useStyles()
-
   return (
-    <List className={classes.root}>
+    <StyledList className={classes.root}>
       {komante.map(({_id, username, kontni, sentAt}) => (
         <div key={_id}>
           <ListItemText
@@ -48,7 +58,7 @@ export default function KomanteList({komante}) {
           <Divider style={{marginBottom: '1em'}} />
         </div>
       ))}
-    </List>
+    </StyledList>
   )
 }