[examples] Change createEmotionCache to use insertionPoint (#32104)

mui · Jul 14, 2022 · 1270c0b · 1270c0b
1 parent 8f89246
commit 1270c0b
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 9 deletions.
diff --git a/examples/nextjs-with-typescript/pages/_document.tsx b/examples/nextjs-with-typescript/pages/_document.tsx
@@ -16,7 +16,7 @@ export default class MyDocument extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
           />
-          {/* Inject MUI styles first to match with the prepend: true configuration. */}
+          <meta name="emotion-insertion-point" content="" />
           {(this.props as any).emotionStyleTags}
         </Head>
         <body>

diff --git a/examples/nextjs-with-typescript/src/createEmotionCache.ts b/examples/nextjs-with-typescript/src/createEmotionCache.ts
@@ -1,7 +1,19 @@
 import createCache from '@emotion/cache';
 
-// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 export default function createEmotionCache() {
-  return createCache({ key: 'css', prepend: true });
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
+      'meta[name="emotion-insertion-point"]',
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
 }
diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
@@ -16,7 +16,7 @@ export default class MyDocument extends Document {
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
           />
-          {/* Inject MUI styles first to match with the prepend: true configuration. */}
+          <meta name="emotion-insertion-point" content="" />
           {this.props.emotionStyleTags}
         </Head>
         <body>

diff --git a/examples/nextjs/src/createEmotionCache.js b/examples/nextjs/src/createEmotionCache.js
@@ -1,7 +1,17 @@
 import createCache from '@emotion/cache';
 
-// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 export default function createEmotionCache() {
-  return createCache({ key: 'css', prepend: true });
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
 }
diff --git a/examples/ssr/createEmotionCache.js b/examples/ssr/createEmotionCache.js
@@ -1,7 +1,17 @@
 import createCache from '@emotion/cache';
 
-// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+const isBrowser = typeof document !== 'undefined';
+
+// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
+// This assures that MUI styles are loaded first.
 // It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
 export default function createEmotionCache() {
-  return createCache({ key: 'css', prepend: true });
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector('meta[name="emotion-insertion-point"]');
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({ key: 'mui-style', insertionPoint });
 }
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
@@ -15,9 +15,10 @@ function renderFullPage(html, css) {
     <html lang="en">
       <head>
         <title>My page</title>
-        ${css}
         <meta name="viewport" content="initial-scale=1, width=device-width" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+        <meta name="emotion-insertion-point" content="" />
+        ${css}
       </head>
       <body>
         <script async src="build/bundle.js"></script>