Use codemod preset-safe

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 CssBaseline from '@material-ui/core/CssBaseline'
+import {createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme} from '@mui/material/styles'
+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,17 +49,19 @@ export default function MyApp(props) {
   }, [])
 
   return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <Provider session={pageProps.session}>
-        <SwitchTheme switchFixed={switchFixed} darkMode={darkMode} setDarkMode={setDarkMode} />
-        {Component.auth ? (
-          <Auth><Component {...pageProps} /></Auth>
-        ) : (
-          <Component {...pageProps} />
-        )}
-      </Provider>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={darkTheme}>
+        <CssBaseline />
+        <Provider session={pageProps.session}>
+          <SwitchTheme switchFixed={switchFixed} darkMode={darkMode} setDarkMode={setDarkMode} />
+          {Component.auth ? (
+            <Auth><Component {...pageProps} /></Auth>
+          ) : (
+            <Component {...pageProps} />
+          )}
+        </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 GroupIcon from '@material-ui/icons/Group'
-import MusicNoteIcon from '@material-ui/icons/MusicNote'
+import {Container, Grid, Typography, Button} from '@mui/material'
+import GroupIcon from '@mui/icons-material/Group'
+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 TwitterIcon from '@material-ui/icons/Twitter'
+import TelegramIcon from '@mui/icons-material/Telegram'
+import TwitterIcon from '@mui/icons-material/Twitter'
 
 import KatKayLa from '../components/kat-kay-la'
 import HeadLayout from '../components/head-layout'