NextJS example with CSS Modules gives wrong order of styles

[CrocoDillon]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Custom styles defined in CSS Modules appear above Material UI styles (I'm talking about the injected <style> blocks) so they don't override Material UI styles properly (assuming same specificity).

Expected Behavior 🤔

Custom styles defined in CSS Modules should appear below Material UI styles so they can override styles like expected.

Steps to Reproduce 🕹

https://codesandbox.io/s/sleepy-khorana-e0l22?file=/src/ProTip.js

This is a fork from the NextJS example where I moved styles from the ProTip component to ProTip.module.scss. I also added a color that should override the typography color to make the issue clear (it doesn't override the typography color).

Context 🔦

I love that Material UI gives developers the options to choose their favorite styling tools as it's shipped with hooks, HOCs and styled-components. I hope this never changes looking at the discussions about styled-components.

I've always been a fan of the hooks approach and been using it extensively but recently run into some issues (using React's strict mode) that made me want to try CSS Modules again. That's when I ran into this override issue.

Regardless of the issues with hooks I think this should be fixed somehow as it gives developers more options to choose their styling tools.

Your Environment 🌎

All environments, see CodeSandbox.

Thanks for reading! ❤

[oliviertassinari]

@CrocoDillon You need to make sure Material-UI styles are injected before CSS modules ones.

[CrocoDillon]

@oliviertassinari I don't know how to control that. Seems like both NextJS and Material UI give little control over how, where and when the styles are injected (which is of course convenient until you do need to have that control).

Edit: Never mind, I'm blind. I will try CSS injection order and get back to close this if it solves the issue.

[CrocoDillon]

Okay the solution seems simply adding a StylesProvider with the injectFirst prop, updated my CodeSandbox to reflect that.

<StylesProvider injectFirst>
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Component {...pageProps} />
  </ThemeProvider>
</StylesProvider>

Seems like the StylesProvider has some more options regarding class name generation, maybe it can fix the issue in strict mode too where the counter seems to be off by one. But that's a different issue so I will close this one. Thanks!

[oliviertassinari]

@CrocoDillon Perfect, I would have expected this very solution to work :). I have been wondering for a long time if we shouldn't make injectFirst the default. It seems to be required way more often than the other way around.

[CrocoDillon]

Yeah I agree, that that would probably make a more sensible default 😅

[PraveenPeri]

StyledEngineProvider is not working in MUI v5 with Next.js. Not sure if I am missing something here. Any insights would be helpful. Here's the codesandbox forked from the Next.js example