[examples] Update gatsby example to use custom plugin (#27357)

examples/gatsby/gatsby-config.js

@@ -4,7 +4,7 @@ module.exports = {
     'gatsby-plugin-react-helmet',
     // If you want to use styled components you should add the plugin here.
     // 'gatsby-plugin-styled-components',
-    'gatsby-plugin-emotion',
+    'gatsby-plugin-mui-emotion',
   ],
   siteMetadata: {
     title: 'My page',

examples/gatsby/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@emotion/react": "latest",
+    "@emotion/server": "latest",
     "@emotion/styled": "latest",
     "@material-ui/core": "next",
     "gatsby": "latest",

examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-browser.js

@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import { CacheProvider } from '@emotion/react';
+import getEmotionCache from './getEmotionCache';
+
+const cache = getEmotionCache();
+
+export const wrapRootElement = ({ element }) => {
+  return <CacheProvider value={cache}>{element}</CacheProvider>;
+};

examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-ssr.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/prefer-default-export */
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createEmotionServer from '@emotion/server/create-instance';
+import { renderToString } from 'react-dom/server';
+import getEmotionCache from './getEmotionCache';
+
+export const replaceRenderer = ({ bodyComponent, setHeadComponents, replaceBodyHTMLString }) => {
+  const cache = getEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+
+  const emotionStyles = extractCriticalToChunks(
+    renderToString(<CacheProvider value={cache}>{bodyComponent}</CacheProvider>),
+  );
+
+  setHeadComponents(
+    emotionStyles.styles.map((style) => (
+      <style
+        data-emotion={`${style.key} ${style.ids.join(' ')}`}
+        key={style.key}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: style.css }}
+      />
+    )),
+  );
+
+  // render the result from `extractCritical`
+  replaceBodyHTMLString(emotionStyles.html);
+};

examples/gatsby/plugins/gatsby-plugin-mui-emotion/getEmotionCache.js

@@ -0,0 +1,5 @@
+import createCache from '@emotion/cache';
+
+export default function getEmotionCache() {
+  return createCache({ key: 'css', prepend: true });
+}

examples/gatsby/plugins/gatsby-plugin-mui-emotion/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-plugin-mui-emotion"
+}