Material UI v5 server side rendering css order not working with gatsby

Question

I posted an issue here too: https://github.com/mui-org/material-ui/issues/25312

So, I'm using the Gatsby example that Material UI v5 has: https://github.com/mui-org/material-ui/tree/next/examples/gatsby

In the example they provide I then add this snippet of code:

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>

Here's the output when running npm run develop with js enabled (browser mode):

Here's the output when running npm run develop with js disabled (the same output as SSR):

You can see that in the second screenshot my custom styles have been overwritten by material ui's styles. The same issue happens when using withStyles as well.

Can anyone help me figure out the correct config so that my styles don't get overwritten for Material UI v5?

Thanks

are you using DEV_SSR flag? https://github.com/gatsbyjs/gatsby/discussions/28138 — diedu, Mar 18 '21 at 03:27
@diedu I'm just using the example from material-ui here: https://github.com/mui-org/material-ui/tree/next/examples/gatsby Doesn't have the DEV_SSR flag enabled but that should be the same as disabling javascript right? However this issue happens in my own project on production too. — Martin Dawson, Mar 18 '21 at 08:53
@Mordechai Thank you for the link. I'll try that answer soon. — Martin Dawson, Mar 18 '21 at 08:53
@Mordechai This does not work in MUI v5. index is not a property in the second param object as seen here: const { defaultTheme, withTheme = false, name } = options, — Martin Dawson, Mar 18 '21 at 14:15
I think using the DEV_SSR flag will be the most reliable way to replicate SSR in dev, I'm not completely sure if it's been released though — diedu, Mar 18 '21 at 14:42
@diedu I did gatsby serve which is the same as production and turned off javascript. This is equivalent to SSR. On the issue the MUI team said they would look into it — Martin Dawson, Mar 18 '21 at 15:06
I guess if you will set in your css `.MuiTypography-root.jss1` it will not be overriten. Currently is class vs class and the rule was added last will get sdvantage. once it 2 classes vs single class you rule will get priority even that Material UI added after — Yosef Tukachinsky, Mar 20 '21 at 11:23
@YosefTukachinsky That's not main table as I want to use material ui styling not css and also jss1 seems like a random generated class name so it will likely break in future builds. — Martin Dawson, Mar 20 '21 at 12:36
I'm having the same problem with Mui v5 + Gatsby + tss-react. Did you manage to fix this? — Alireza Fa, Oct 17 '21 at 20:57
@AlirezaFa I posted an answer here... Just use `sx` prop instead or the styledComponents API. I use sx everywhere — Martin Dawson, Oct 18 '21 at 13:39
@AlirezaFa Also check this comment: https://github.com/mui-org/material-ui/issues/25312#issuecomment-900163029 — Martin Dawson, Oct 18 '21 at 13:41

Martin Dawson · Accepted Answer · 2021-10-18T13:41:28.913

Posting the answer from the GitHub issue by MUI's founder because this will affect many many Gatsby users in the future.

@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:

Stop using the makeStyles/withStyles API now. We are about to deprecate them in v5 (and remove in v6). Migrate to Next.js. 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.

This is correct from my findings, makeStyles and withStyles don't work with SSR and gatsby.

The best solution is to use the new sx prop. This can do everything that these functions can do anyway including media queries and use theme prop. The one downside is that it's slightly slower for many many uses.

See the docs here: https://web.archive.org/web/20210116082036/https://next.material-ui.com/system/basics/#the-sx-prop

And for any other edge cases you can use styledComponents API as that should work with it.

Update:

Check out this comment too: https://github.com/mui-org/material-ui/issues/25312#issuecomment-900163029

Material UI v5 server side rendering css order not working with gatsby

1 Answers1