I posted an issue here too:

So, I'm using the Gatsby example that Material UI v5 has:

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.

What is the correct config so that my styles don't get overwritten for Material UI v5?

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

So, I'm using the Gatsby example that Material UI v5 has: https://github./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.

What is the correct config so that my styles don't get overwritten for Material UI v5?

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited Jan 22, 2024 at 18:10 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 15, 2021 at 13:07 Martin DawsonMartin Dawson 7,65788 gold badges5858 silver badges9696 bronze badges 12

• are you using DEV_SSR flag? github./gatsbyjs/gatsby/discussions/28138 – diedu Commented Mar 18, 2021 at 3:27
• stackoverflow./a/62646041/1751640 helps? – Mordechai Commented Mar 18, 2021 at 4:20
• @diedu I'm just using the example from material-ui here: github./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 Commented Mar 18, 2021 at 8:53
• @Mordechai Thank you for the link. I'll try that answer soon. – Martin Dawson Commented Mar 18, 2021 at 8: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 Commented Mar 18, 2021 at 14:15

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 6

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-ponents instead of emotion. styled-ponents 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/web/20210116082036/https://next.material-ui./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 ment too: https://github./mui-org/material-ui/issues/25312#issuement-900163029