diff --git a/examples/gatsby/gatsby-config.js b/examples/gatsby/gatsby-config.js
index 33f09fde769195..1c57408c4e725a 100644
--- a/examples/gatsby/gatsby-config.js
+++ b/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',
diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
index 8b3f35ccdf48bb..b889f4bdc2c3cf 100644
--- a/examples/gatsby/package.json
+++ b/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",
diff --git a/examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-browser.js b/examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-browser.js
new file mode 100644
index 00000000000000..f61e0f298f8bb3
--- /dev/null
+++ b/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>;
+};
diff --git a/examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-ssr.js b/examples/gatsby/plugins/gatsby-plugin-mui-emotion/gatsby-ssr.js
new file mode 100644
index 00000000000000..dc53a1d535d636
--- /dev/null
+++ b/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);
+};
diff --git a/examples/gatsby/plugins/gatsby-plugin-mui-emotion/getEmotionCache.js b/examples/gatsby/plugins/gatsby-plugin-mui-emotion/getEmotionCache.js
new file mode 100644
index 00000000000000..c02370fcf1ed54
--- /dev/null
+++ b/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 });
+}
diff --git a/examples/gatsby/plugins/gatsby-plugin-mui-emotion/package.json b/examples/gatsby/plugins/gatsby-plugin-mui-emotion/package.json
new file mode 100644
index 00000000000000..939cd71f853f41
--- /dev/null
+++ b/examples/gatsby/plugins/gatsby-plugin-mui-emotion/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "gatsby-plugin-mui-emotion"
+}