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
 }
 

pages/_document.js

@@ -1,8 +1,9 @@
-import React from 'react'
 import Document, {
   Html, Head, Main, NextScript
 } from 'next/document'
-import ServerStyleSheets from '@mui/styles/ServerStyleSheets'
+
+import createEmotionServer from '@emotion/server/create-instance'
+import createEmotionCache from '../lib/create-emotion-cache'
 
 export default class MyDocument extends Document {
   render() {
@@ -12,6 +13,7 @@ export default class MyDocument extends Document {
           <link rel='manifest' href='/manifest.json' />
           <link rel='icon' type='image/x-icon' sizes='128x128' href='/favicon.ico' />
           <link rel='apple-touch-icon' href='/favicon.ico' />
+          {this.props.emotionStyleTags}
           <meta name='application-name' content='#OKi | Organisation KA Internationale' />
           <meta name='theme-color' content='#303030' />
           <meta name='apple-mobile-web-app-status-bar' content='#303030' />
@@ -27,17 +29,30 @@ export default class MyDocument extends Document {
 }
 
 MyDocument.getInitialProps = async ctx => {
-  const sheets = new ServerStyleSheets()
   const originalRenderPage = ctx.renderPage
+  const cache = createEmotionCache()
+  const {extractCriticalToChunks} = createEmotionServer(cache)
 
-  ctx.renderPage = () => originalRenderPage({
+  ctx.renderPage = () =>
-    enhanceApp: App => props => sheets.collect(<App {...props} />)
+    originalRenderPage({
+      enhanceApp: App =>
+        function EnhanceApp(props) { // eslint-disable-line react/function-component-definition
+          return <App emotionCache={cache} {...props} />
+        },
     })
 
   const initialProps = await Document.getInitialProps(ctx)
+  const emotionStyles = extractCriticalToChunks(initialProps.html)
+  const emotionStyleTags = emotionStyles.styles.map(style => (
+    <style
+      key={style.key}
+      data-emotion={`${style.key} ${style.ids.join(' ')}`}
+      dangerouslySetInnerHTML={{__html: style.css}}
+    />
+  ))
 
   return {
     ...initialProps,
-    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
+    emotionStyleTags
   }
 }