Use codemod preset-safe

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>
   )
 }