[docs] Gatsby order conflict in SSR output (head/JSS vs. body/emotion)

I’m following this example exactly: https://github.com/mui-org/material-ui/tree/next/examples/gatsby

Here’s my gatsby-config.js (abbreviated):

module.exports = {
  plugins: [
    "gatsby-plugin-layout",
    {
      resolve: "gatsby-plugin-material-ui",
      options: {},
    },
    "gatsby-plugin-emotion",
  ],
};

Gatsby-browser.js:

export { wrapPageElement, wrapRootElement } from "./sharedGatsby";

Gatsby-ssr.js

export { wrapPageElement, wrapRootElement } from "./sharedGatsby";

SharedGatsby.js

import React from "react";
import theme from "./src/theme";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";

export const wrapRootElement = ({ element }) => {
  return (
        <ThemeProvider theme={createMuiTheme(theme)}>
          {element}
        </ThemeProvider>
  );
};

In pages/index.js:

import {
  Typography,
  makeStyles,
} from "@material-ui/core";

const useStyles = makeStyles({
  typographyHeader: {
    fontWeight: "bold",
    fontSize: ({ isOnMobile }) => (isOnMobile ? 30 : 30),
    color: textColor,
  },
});


<StyledEngineProvider injectFirst>
         <Typography classes={{ root: classes.typographyHeader }} align="center">
          Goodbye, Excel.
          <Box>Hello, automated Discounted Cash Flows.</Box>
        </Typography>
 ...other components
</StyledEngineProvider>

package.json:

    "@material-ui/core": "^5.0.0-alpha.25",
    "@material-ui/icons": "^5.0.0-alpha.24",
    "@material-ui/styles": "^5.0.0-alpha.25",
    "@emotion/react": "^11.1.1",
    "@emotion/styled": "^11.0.0",
    "gatsby": "^2.32.3",
    "gatsby-plugin-material-ui": "^2.1.10",
    "gatsby-plugin-emotion": "^6.0.0",

It works 100% fine on the client side but when I run npm run build and generate a static SSR index.html the styles order is incorrect.

Here’s the output:

You can see that my custom styles .jss4 and .jss2 are being overwritten by MuiTypography-root.

I imagine I’m doing something wrong but not sure what.

Thanks for any help

[mojimi]

It’s a shame it’s not working anymore, Gatsby is incredibly popular, including the Mui plugins Gatsby has

[oliviertassinari]

@mojimi What makes you think that it’s “not working anymore”. It’s popular, but not really growing.

@MartinDawson I had a look at your issue. I believe this problem can’t be solved with the current API exposed by Gatsby and emotion. What we would need is the capability to extract the CSS output from the HTML page, and inline it in the initial SSR request, before the JSS output.

You have 3 options:

1. Stop using the makeStyles/withStyles API now. We are about to deprecate them in v5 (and remove in v6).
2. Migrate to Next.js.
3. Use styled-components instead of emotion. styled-components doesn’t render it’s style inside the body, with the order of the Gatsby plugins, you should be able to get the correct injection order.

While looking at the issue. I noticed this simplification opportunity:

diff --git a/examples/gatsby/plugins/gatsby-plugin-top-layout/gatsby-browser.js b/examples/gatsby/plugins/gatsby-plugin-top-layout/gatsby-browser.js
index 63f4104f1a..3f7ade93b0 100644
--- a/examples/gatsby/plugins/gatsby-plugin-top-layout/gatsby-browser.js
+++ b/examples/gatsby/plugins/gatsby-plugin-top-layout/gatsby-browser.js
@@ -1,7 +1,13 @@
 /* eslint-disable import/prefer-default-export */
 import * as React from 'react';
 import TopLayout from './TopLayout';
+import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';

+// TODO v5: remove StyledEngineProvider once migration to emotion is completed
 export const wrapRootElement = ({ element }) => {
-  return <TopLayout>{element}</TopLayout>;
+  return (
+    <StyledEngineProvider injectFirst>
+      <TopLayout>{element}</TopLayout>
+    </StyledEngineProvider>
+  );
 };
diff --git a/examples/gatsby/src/pages/about.js b/examples/gatsby/src/pages/about.js
index eccbd909d9..cd84bae812 100644
--- a/examples/gatsby/src/pages/about.js
+++ b/examples/gatsby/src/pages/about.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
@@ -9,18 +8,15 @@ import Copyright from '../components/Copyright';

 export default function About() {
   return (
-    // TODO v5: remove once migration to emotion is completed
-    <StyledEngineProvider injectFirst>
-      <Container maxWidth="sm">
-        <Box sx={{ my: 4 }}>
-          <Typography variant="h4" component="h1" gutterBottom>
-            Gatsby v5-alpha example
-          </Typography>
-          <Link to="/">Go to the main page</Link>
-          <ProTip />
-          <Copyright />
-        </Box>
-      </Container>
-    </StyledEngineProvider>
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Gatsby v5-alpha example
+        </Typography>
+        <Link to="/">Go to the main page</Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
   );
 }
diff --git a/examples/gatsby/src/pages/index.js b/examples/gatsby/src/pages/index.js
index e17f067ce5..a050a09b2b 100644
--- a/examples/gatsby/src/pages/index.js
+++ b/examples/gatsby/src/pages/index.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
@@ -9,20 +8,17 @@ import Copyright from '../components/Copyright';

 export default function Index() {
   return (
-    // TODO v5: remove once migration to emotion is completed
-    <StyledEngineProvider injectFirst>
-      <Container maxWidth="sm">
-        <Box sx={{ my: 4 }}>
-          <Typography variant="h4" component="h1" gutterBottom>
-            Gatsby v5-alpha example
-          </Typography>
-          <Link to="/about" color="secondary">
-            Go to the about page
-          </Link>
-          <ProTip />
-          <Copyright />
-        </Box>
-      </Container>
-    </StyledEngineProvider>
+    <Container maxWidth="sm">
+      <Box sx={{ my: 4 }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Gatsby v5-alpha example
+        </Typography>
+        <Link to="/about" color="secondary">
+          Go to the about page
+        </Link>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
   );
 }

In case somebody want to work on it 👍