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

[MartinDawson]

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

[MartinDawson]

After further investigation, it seems to be a problem with all 3 styling methods, makeStyles, useStyles and the HOC API.

All 3 methods and my custom styles are overwritten by material ui's styles in SSR.

example:

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  typographyHeader: {
    fontWeight: 'bold',
    fontSize: () => 30,
    color: '#292929',
  },
});

          <Typography classes={{ root: classes.typographyHeader }} align="center">
            Gatsby v5-alpha example
          </Typography>

running the example with js disabled (SSR):

running the example with js enabled (non-SSR):

You can see from the above that the styles are in the wrong order in the example gatsby repo.

[MartinDawson]

@oliviertassinari Is their any chance this could be looked into please? I also posted an SO post here and it seems nobody knows:
https://stackoverflow.com/questions/66638599/material-ui-v5-server-side-rendering-css-order-not-working-with-gatsby

[oliviertassinari]

@MartinDawson Yes, we will. I didn't yet have the chance. Next.js is growing a lot faster than Gatsby, so it didn't seem to be a crazy important. However, the onboarding experience is critical to the success of our project so it should be painless to start with Gatsby.

[MartinDawson]

@oliviertassinari Thank you.

I considered next or gatsby. Guess I chose the wrong framework.

[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 👍

[MartinDawson]

@oliviertassinari Thanks a lot for the update.

I can't migrate to next.js yet due to time constraints so I'm interested in the other 2 solutions .

Edit: Okay, using the sx prop works great. I have migrated my app to completely using the sx prop anyway so that's fine for me until I switch to nextjs at a later date.

Thanks

[oliviertassinari]

We already fixed the issue in #27357. If needed, developers can prepend: https://github.com/mui-org/material-ui/pull/27357/files#r673042892.

[ffMathy]

It doesn't seem to work for me. The issue still persists. Here's my project:
https://github.com/sponsorkit/sponsorkit.io/tree/main/src/frontend

[ffMathy]

1. Stop using the makeStyles/withStyles API now. We are about to deprecate them in v5 (and remove in v6).

I tried this without luck. The issue persists.

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.

How do I do this?

[MartinDawson]

@ffMathy It works if you use the sx prop on components.

You can do everything with emotion/styled-components within sx anyway.

If a component doesn't support sx then just wrap it in the Box component which does support it

[ffMathy]

@MartinDawson ah maybe that's the issue then. I think I am using a Theme from the MUI store that doesn't use sx.

Any workaround?

[ffMathy]

Actually @MartinDawson I just contacted the theme creators. They say they only use sx.

Not sure why it's happening then.

Perhaps because I am also importing styles directly in TypeScript from .module.scss files?