Replace StyledEngin by Emotion

pages/_app.js

@@ -1,11 +1,13 @@
 import {useEffect, useMemo, useState} from 'react'
 import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
-import {createTheme, ThemeProvider, StyledEngineProvider} from '@mui/material/styles'
+import {createTheme, ThemeProvider} from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
 import {Provider, useSession} from 'next-auth/client'
-
+import {CacheProvider} from '@emotion/react'
 import {grey, green, red} from '@mui/material/colors'
+import createEmotionCache from '../lib/create-emotion-cache'
+
 import SwitchTheme from '../components/switch-theme'
 
 const getDesignTokens = mode => ({
@@ -39,8 +41,10 @@ const getDesignTokens = mode => ({
   },
 })
 
+const clientSideEmotionCache = createEmotionCache()
+
 export default function MyApp(props) {
-  const {Component, pageProps} = props
+  const {Component, emotionCache = clientSideEmotionCache, pageProps} = props
   const [mode, setMode] = useState('light')
   const [switchFixed, setSwitchFixed] = useState(false)
   const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode])
@@ -75,7 +79,7 @@ export default function MyApp(props) {
   }, [])
 
   return (
-    <StyledEngineProvider injectFirst>
+    <CacheProvider value={emotionCache}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <Provider session={pageProps.session}>
@@ -87,7 +91,7 @@ export default function MyApp(props) {
           )}
         </Provider>
       </ThemeProvider>
-    </StyledEngineProvider>
+    </CacheProvider>
   )
 }
 
@@ -117,6 +121,7 @@ function Auth({children}) {
 MyApp.propTypes = {
   Component: PropTypes.elementType.isRequired,
   pageProps: PropTypes.object.isRequired,
+  emotionCache: PropTypes.object,
   router: PropTypes.object.isRequired
 }