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

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= 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

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