Use codemod preset-safe

components/alet.js

@@ -6,7 +6,7 @@ import {
   DialogContent,
   DialogTitle,
   DialogActions
-} from '@material-ui/core'
+} from '@mui/material'
 
 export default function Alet({esOuve, meteEsOuve, handleKonfime}) {
   const handleFemen = () => {

components/awtis/awtis-biyografi.js

@@ -10,7 +10,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle
-} from '@material-ui/core'
+} from '@mui/material'
 
 import MizikBadjMeni from './mizik-badj-meni'
 

components/awtis/awtis-kat.js

@@ -12,10 +12,10 @@ import {
   Collapse,
   IconButton,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
 
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
 
 import MizikLis from './mizik-lis'
 import AwtisBiyografi from './awtis-biyografi'
@@ -73,7 +73,6 @@ export default function AwtisKat({anAwtis}) {
   }
 
   return (
-    (
     <Root>
       <Grid item xs={12} sm={6} lg={4}>
         <Card className={classes.root}>
@@ -102,6 +101,7 @@ export default function AwtisKat({anAwtis}) {
               })}
               aria-expanded={expanded}
               aria-label='show more'
+              size='large'
               onClick={handleExpandClick}
             >
               <ExpandMoreIcon />
@@ -125,7 +125,6 @@ export default function AwtisKat({anAwtis}) {
       )}
     </Root>
   )
-  )
 }
 
 AwtisKat.propTypes = {

components/awtis/mizik-badj-meni.js

@@ -11,10 +11,10 @@ import {
   Paper,
   Popper,
   Badge
-} from '@material-ui/core'
+} from '@mui/material'
 
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
-import MenuBookIcon from '@material-ui/icons/MenuBook'
+import MenuBookIcon from '@mui/icons-material/MenuBook'
 
 const PREFIX = 'mizik-badj-meni'
 

components/awtis/mizik-lis.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
-import {List, ListItem, ListItemText} from '@material-ui/core'
+import {List, ListItem, ListItemText} from '@mui/material'
-import FiberNewOutlinedIcon from '@material-ui/icons/FiberNewOutlined'
+import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined'
-import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
+import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
-import ExplicitIcon from '@material-ui/icons/Explicit'
+import ExplicitIcon from '@mui/icons-material/Explicit'
 
 import {esBrandNew} from '../../lib/date'
 

components/awtis/pajinasyon.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
-import Pagination from '@material-ui/lab/Pagination'
+import Pagination from '@mui/material/Pagination'
-import {Grid} from '@material-ui/core'
+import {Grid} from '@mui/material'
 
 const PREFIX = 'pajinasyon'
 

components/cgu/cgu-dialog.js

@@ -1,7 +1,7 @@
 import {useRef, useEffect} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@material-ui/core'
+import {Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography} from '@mui/material'
 import {useRouter} from 'next/router'
 import Cgu from '.'
 

components/cgu/index.js

@@ -1,6 +1,6 @@
-import {List, ListItem, ListItemText, Link, Typography, ListItemIcon} from '@material-ui/core'
+import {List, ListItem, ListItemText, Link, Typography, ListItemIcon} from '@mui/material'
 import {styled} from '@mui/material/styles'
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt'
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
 
 const PREFIX = 'index'
 

components/footer.js

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import {styled} from '@mui/material/styles'
-import {Container, Link, Typography} from '@material-ui/core'
+import {Container, Link, Typography} from '@mui/material'
 import CGUDialog from './cgu/cgu-dialog'
 
 const PREFIX = 'footer'
@@ -19,7 +19,7 @@ const Root = styled('div')((
     padding: theme.spacing(3, 2),
     marginTop: 'auto',
     backgroundColor:
-      theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
+      theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[800]
   },
 
   [`& .${classes.text}`]: {

components/kat-kay-la.js

@@ -6,8 +6,8 @@ import {
   CardActionArea,
   Typography,
   Grid
-} from '@material-ui/core'
+} from '@mui/material'
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
 
 const PREFIX = 'kat-kay-la'
 

components/komante/ekri-komante.js

@@ -8,8 +8,8 @@ import {
   Snackbar,
   LinearProgress,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
-import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlert from '@mui/material/Alert'
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 

components/komante/komante-list.js

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types'
 import {format} from 'date-fns'
 import {fr} from 'date-fns/locale'
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
 
 import {
   Typography,
   Divider,
   List,
   ListItemText
-} from '@material-ui/core'
+} from '@mui/material'
 
 import {formatJsonString} from '../../lib/utils/format'
 

components/komante/vwe-komante.js

@@ -13,8 +13,8 @@ import {
   Typography,
   Tooltip,
   Zoom
-} from '@material-ui/core'
+} from '@mui/material'
-import AddCommentIcon from '@material-ui/icons/AddComment'
+import AddCommentIcon from '@mui/icons-material/AddComment'
 import {useRouter} from 'next/router'
 import Koneksyon from '../sesyon/koneksyon'
 import KomanteList from './komante-list'
@@ -70,7 +70,6 @@ export default function VweKomante({komante, teks}) {
   }, [esOuve])
 
   return (
-    (
     <Root>
       <KomanteTooltip
         title='Komantè'
@@ -80,7 +79,14 @@ export default function VweKomante({komante, teks}) {
           tooltip: classes.tooltip
         }}
       >
-          <IconButton className={classes.margin} color='primary' aria-label='commentaire' component='span' onClick={handleClick}>
+        <IconButton
+          className={classes.margin}
+          color='primary'
+          aria-label='commentaire'
+          component='span'
+          size='large'
+          onClick={handleClick}
+        >
           <AddCommentIcon />
         </IconButton>
       </KomanteTooltip>
@@ -139,7 +145,6 @@ export default function VweKomante({komante, teks}) {
       </Dialog>
     </Root>
   )
-  )
 }
 
 VweKomante.defaultProps = {

components/navigasyon.js

@@ -2,16 +2,16 @@ import {useState} from 'react'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
-import AppBar from '@material-ui/core/AppBar'
+import AppBar from '@mui/material/AppBar'
-import Tabs from '@material-ui/core/Tabs'
+import Tabs from '@mui/material/Tabs'
-import Tab from '@material-ui/core/Tab'
+import Tab from '@mui/material/Tab'
-import HomeIcon from '@material-ui/icons/Home'
+import HomeIcon from '@mui/icons-material/Home'
-import MenuBookIcon from '@material-ui/icons/MenuBook'
+import MenuBookIcon from '@mui/icons-material/MenuBook'
-import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver'
+import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver'
-import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
+import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd'
-import Typography from '@material-ui/core/Typography'
+import Typography from '@mui/material/Typography'
-import Box from '@material-ui/core/Box'
+import Box from '@mui/material/Box'
 
 const PREFIX = 'navigasyon'
 
@@ -98,12 +98,12 @@ export default function Navigasyon({selectedTab}) {
         <Tabs
           value={selectedTab}
           variant='fullWidth'
-          scrollButtons='on'
+          scrollButtons
           indicatorColor='primary'
           textColor='primary'
           aria-label='scrollable force tabs example'
           onChange={handleChange}
-        >
+          allowScrollButtonsMobile>
           <Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} />
           <Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
           <Tab label='Awtis' icon={<RecordVoiceOverIcon style={{fontSize: 30}} />} {...a11yProps(2)} />
@@ -115,7 +115,7 @@ export default function Navigasyon({selectedTab}) {
       <TabPanel value={value} index={2} />
       <TabPanel value={value} index={3} />
     </div>
-  )
+  );
 }
 
 Navigasyon.propTypes = {

components/rezo-menu.js

@@ -2,8 +2,8 @@ import {useRef, useState} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@material-ui/core'
+import {Button, ListItemIcon, ListItemText, Menu, MenuItem} from '@mui/material'
-import PublicIcon from '@material-ui/icons/Public'
+import PublicIcon from '@mui/icons-material/Public'
 
 const PREFIX = 'rezo-menu'
 

components/sesyon/dekoneksyon.js

@@ -3,8 +3,8 @@ import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 import {signOut} from 'next-auth/client'
-import {Tooltip, Fab, Zoom} from '@material-ui/core'
+import {Tooltip, Fab, Zoom} from '@mui/material'
-import ExitToAppIcon from '@material-ui/icons/ExitToApp'
+import ExitToAppIcon from '@mui/icons-material/ExitToApp'
 
 import Alet from '../alet'
 

components/sesyon/koneksyon.js

@@ -15,9 +15,9 @@ import {
   LinearProgress,
   Snackbar,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
-import {Visibility, VisibilityOff} from '@material-ui/icons'
+import {Visibility, VisibilityOff} from '@mui/icons-material'
-import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlert from '@mui/material/Alert'
 import {Google} from '@icons-pack/react-simple-icons'
 
 import {validateEmail} from '../../lib/utils/emails'
@@ -141,6 +141,7 @@ function Koneksyon({detay, tit, soutit, titGwose, chimen}) {
             <InputAdornment position='end'>
               <IconButton
                 aria-label='password visibility'
+                size='large'
                 onClick={handleClickShowPassword}
                 onMouseDown={handleMouseDownPassword}
               >

components/sesyon/login-provider.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import Link from 'next/link'
 import {signIn} from 'next-auth/client'
-import {Button} from '@material-ui/core'
+import {Button} from '@mui/material'
 
 export default function LoginProvider({id, title, icon, callbackUrl}) {
   const hanleClick = event => {

components/soumet/ajoute-tradiksyon.js

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
-import {MenuItem, Menu, Button} from '@material-ui/core'
+import {MenuItem, Menu, Button} from '@mui/material'
 import {uniq} from 'lodash'
 
 const PREFIX = 'AjouteTradiksyon'

components/soumet/ekri-teks.js

@@ -18,9 +18,9 @@ import {
   TextField,
   Tooltip,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
-import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlert from '@mui/material/Alert'
-import CloseIcon from '@material-ui/icons/Close'
+import CloseIcon from '@mui/icons-material/Close'
 
 import AjouteTradiksyon from './ajoute-tradiksyon'
 
@@ -244,6 +244,7 @@ function EkriTeks({session}) {
                       style={{bottom: 75}}
                       aria-label='remove-tradiksyon'
                       edge='end'
+                      size='large'
                       onClick={() => handleRemoveTradiksyon(k)}
                     >
                       <CloseIcon />

components/switch-theme.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import {styled} from '@mui/material/styles'
-import WbSunnyIcon from '@material-ui/icons/WbSunny'
+import WbSunnyIcon from '@mui/icons-material/WbSunny'
-import Brightness3Icon from '@material-ui/icons/Brightness3'
+import Brightness3Icon from '@mui/icons-material/Brightness3'
-import {Box} from '@material-ui/core'
+import {Box} from '@mui/material'
 
 const PREFIX = 'switch-theme'
 

components/teks/denye-teks.js

@@ -1,4 +1,4 @@
-import {Container, Grid} from '@material-ui/core'
+import {Container, Grid} from '@mui/material'
 
 import {styled} from '@mui/material/styles'
 

components/teks/drawer-bar.js

@@ -9,9 +9,9 @@ import {
   FormControl,
   InputAdornment,
   InputBase
-} from '@material-ui/core'
+} from '@mui/material'
 
-import SearchIcon from '@material-ui/icons/Search'
+import SearchIcon from '@mui/icons-material/Search'
 
 import MizikLis from '../awtis/mizik-lis'
 

components/teks/entegre-mizik.js

@@ -1,4 +1,4 @@
-import {Box, IconButton, Typography} from '@material-ui/core'
+import {Box, IconButton, Typography} from '@mui/material'
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
 
@@ -126,7 +126,12 @@ function EntegreMizik({anTeks, isMobile}) {
       </Typography>
 
       {!okiMizikID && filteredKouteyAchtey.map(({_id, boutik, url}) => (
-        <IconButton key={_id} aria-label='player' onClick={() => handleClick(boutik, url)}>
+        <IconButton
+          key={_id}
+          aria-label='player'
+          size='large'
+          onClick={() => handleClick(boutik, url)}
+        >
           {kouteyAchteyIcons[boutik]}
         </IconButton>
       ))}

components/teks/oki-mizik.js

@@ -1,4 +1,4 @@
-import {Typography, Link, Box} from '@material-ui/core'
+import {Typography, Link, Box} from '@mui/material'
 import PropTypes from 'prop-types'
 
 const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'

components/teks/pataje.js

@@ -1,14 +1,14 @@
 import {useState} from 'react'
 import PropTypes from 'prop-types'
 
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
-import SpeedDial from '@material-ui/lab/SpeedDial'
+import SpeedDial from '@mui/material/SpeedDial'
-import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'
+import SpeedDialIcon from '@mui/material/SpeedDialIcon'
-import SpeedDialAction from '@material-ui/lab/SpeedDialAction'
+import SpeedDialAction from '@mui/material/SpeedDialAction'
-import FileCopyIcon from '@material-ui/icons/FileCopyOutlined'
+import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'
-import ShareIcon from '@material-ui/icons/Share'
+import ShareIcon from '@mui/icons-material/Share'
-import TwitterIcon from '@material-ui/icons/Twitter'
+import TwitterIcon from '@mui/icons-material/Twitter'
-import {Backdrop} from '@material-ui/core'
+import {Backdrop} from '@mui/material'
 
 const PREFIX = 'pataje'
 

components/teks/teks-drawer.js

@@ -18,16 +18,16 @@ import {
   Snackbar,
   Tooltip,
   Zoom
-} from '@material-ui/core'
+} from '@mui/material'
 
-import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
-import ExplicitIcon from '@material-ui/icons/Explicit'
+import ExplicitIcon from '@mui/icons-material/Explicit'
 
-import MenuIcon from '@material-ui/icons/Menu'
+import MenuIcon from '@mui/icons-material/Menu'
 
-import {useTheme, styled} from '@material-ui/core/styles'
+import {useTheme, styled} from '@mui/material/styles'
 
-import MuiAlert from '@material-ui/lab/Alert'
+import MuiAlert from '@mui/material/Alert'
 import {formatJsonString} from '../../lib/utils/format'
 
 import VweKomante from '../komante/vwe-komante'
@@ -253,6 +253,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
             aria-label='open drawer'
             edge='start'
             className={classes.menuButton}
+            size='large'
             onClick={handleDrawerToggle}
           >
             <MenuIcon />
@@ -300,7 +301,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
             <DrawerBar meteEsMobilOuve={meteEsMobilOuve} teks={teks} anTeks={anTeks} />
           </Drawer>
         </Hidden>
-        <Hidden xsDown implementation='css'>
+        <Hidden smDown implementation='css'>
           <Drawer
             open
             classes={{
@@ -357,7 +358,7 @@ export default function TeksDrawer({teks, anTeks, komante}) {
             {anTeks.okiMizikID && (
               <OkiMizik id={anTeks.okiMizikID} />
             )}
-            <Grid container justify='center' spacing={1}>
+            <Grid container justifyContent='center' spacing={1}>
               <Grid item xs={12} md={langArray.length > 0 ? 6 : null}>
                 <div className={classes.gridText}>
                   <Typography align='center' className={classes.text} variant='h4'>

components/teks/teks-kat.js

@@ -9,9 +9,9 @@ import {
   CardMedia,
   Typography,
   Grid
-} from '@material-ui/core'
+} from '@mui/material'
-import ExplicitIcon from '@material-ui/icons/Explicit'
+import ExplicitIcon from '@mui/icons-material/Explicit'
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
 
 const PREFIX = 'teks-kat'
 

components/teks/vwe-koute-achte.js

@@ -13,12 +13,12 @@ import {
   Lbry,
   Peertube
 } from '@icons-pack/react-simple-icons'
-import VideocamIcon from '@material-ui/icons/Videocam'
+import VideocamIcon from '@mui/icons-material/Videocam'
-import MusicNoteIcon from '@material-ui/icons/MusicNote'
+import MusicNoteIcon from '@mui/icons-material/MusicNote'
-import AlbumIcon from '@material-ui/icons/Album'
+import AlbumIcon from '@mui/icons-material/Album'
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled'
+import PlayCircleFilledIcon from '@mui/icons-material/PlayCircleFilled'
-import {styled} from '@material-ui/core/styles'
+import {styled} from '@mui/material/styles'
-import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@material-ui/lab'
+import {SpeedDial, SpeedDialIcon, SpeedDialAction} from '@mui/material'
 
 const PREFIX = 'vwe-koute-achte'
 

pages/404.js

@@ -1,4 +1,4 @@
-import {Container, Typography} from '@material-ui/core'
+import {Container, Typography} from '@mui/material'
 import Link from 'next/link'
 import Image from 'next/image'
 

pages/_app.js

@@ -1,8 +1,8 @@
 import {useEffect, useMemo, useState} from 'react'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
-import {createMuiTheme, ThemeProvider} from '@material-ui/core/styles'
+import {createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme} from '@mui/material/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
+import CssBaseline from '@mui/material/CssBaseline'
 import {Provider, useSession} from 'next-auth/client'
 
 import SwitchTheme from '../components/switch-theme'
@@ -12,9 +12,9 @@ export default function MyApp(props) {
   const [darkMode, setDarkMode] = useState(false)
   const [switchFixed, setSwitchFixed] = useState(false)
 
-  const darkTheme = useMemo(() => createMuiTheme({
+  const darkTheme = useMemo(() => createTheme(adaptV4Theme({
     palette: {
-      type: darkMode ? 'dark' : 'light',
+      mode: darkMode ? 'dark' : 'light',
       primary: {
         light: '#81c784',
         main: '#4caf50',
@@ -22,7 +22,7 @@ export default function MyApp(props) {
         contrastText: '#fff'
       }
     }
-  }), [darkMode])
+  })), [darkMode])
 
   useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
@@ -49,6 +49,7 @@ export default function MyApp(props) {
   }, [])
 
   return (
+    <StyledEngineProvider injectFirst>
       <ThemeProvider theme={darkTheme}>
         <CssBaseline />
         <Provider session={pageProps.session}>
@@ -60,6 +61,7 @@ export default function MyApp(props) {
           )}
         </Provider>
       </ThemeProvider>
+    </StyledEngineProvider>
   )
 }
 

pages/_document.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Document, {
   Html, Head, Main, NextScript
 } from 'next/document'
-import {ServerStyleSheets} from '@material-ui/core/styles'
+import ServerStyleSheets from '@mui/styles/ServerStyleSheets'
 
 export default class MyDocument extends Document {
   render() {

pages/awtis.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import {Container, Grid} from '@material-ui/core'
+import {Container, Grid} from '@mui/material'
 
 import {jwennAwtisKantite, jwennAwtisPajinasyon} from '../lib/oki-api'
 

pages/index.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types'
 import Image from 'next/image'
-import {Container, Grid, Typography, Button} from '@material-ui/core'
+import {Container, Grid, Typography, Button} from '@mui/material'
-import GroupIcon from '@material-ui/icons/Group'
+import GroupIcon from '@mui/icons-material/Group'
-import MusicNoteIcon from '@material-ui/icons/MusicNote'
+import MusicNoteIcon from '@mui/icons-material/MusicNote'
 import {Pleroma, Peertube, Paypal} from '@icons-pack/react-simple-icons'
-import TelegramIcon from '@material-ui/icons/Telegram'
+import TelegramIcon from '@mui/icons-material/Telegram'
-import TwitterIcon from '@material-ui/icons/Twitter'
+import TwitterIcon from '@mui/icons-material/Twitter'
 
 import KatKayLa from '../components/kat-kay-la'
 import HeadLayout from '../components/head-layout'

src/theme.js

@@ -1,7 +1,7 @@
-import {createMuiTheme} from '@material-ui/core/styles'
+import {createTheme, adaptV4Theme} from '@mui/material/styles'
-import {red} from '@material-ui/core/colors'
+import {red} from '@mui/material/colors'
 
-const theme = createMuiTheme({
+const theme = createTheme(adaptV4Theme({
   palette: {
     primary: {
       main: '#556cd6'
@@ -16,6 +16,6 @@ const theme = createMuiTheme({
       default: '#fff'
     }
   }
-})
+}))
 
 export default theme