Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NextJS example with CSS Modules gives wrong order of styles

See original GitHub issue

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! ❤

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:6 (2 by maintainers)

Top GitHub Comments

4reactions

CrocoDilloncommented, Apr 26, 2020

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!

2reactions

PraveenPericommented, Nov 13, 2021

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

Top Results From Across the Web

NextJS example with CSS Modules gives wrong order of styles

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

NextJS wrong CSS order on production build - Stack Overflow

It seems the MDB styling is being overwritten by bootstrap on building the app. I deploy my app by using next build &&...

Basic Features: Built-in CSS Support - Next.js

Next.js supports including CSS files as Global CSS or CSS Modules, using `styled-jsx` ... For example, consider the following stylesheet named styles.css :...

Global vs. Local Styling In Next.js - Smashing Magazine

Global styles; Utility classes; Component styles. I'm indebted to Andy Bell's idea of CUBE CSS (“Composition, Utility, Block, Exception”) ...

Control CSS imports order for Next.js & webpack based ...

Even though the order is different, each components style is unique to that component and will not interfere with other components css, and ......