[examples] Nextjs CSS modules insert before emotion

[PraveenPeri]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Trying to override MUI styles through .scss file isn't working in v5 and Next.js. I could repro the issue in the codesandbox forked your official Next.js example. This is same problem we are facing in our application where the css is loaded before MUI styles even with StyledEngineProvider hook.

Expected behavior 🤔

MUI styles should be loaded into the page before the css so that custom styles can take effect

Steps to reproduce 🕹

Steps:

1. Setup a Next.js project with MUI v5
2. Use StyledEngineProvider hook to ensure the correct injection order
3. Write a react component with a corresponding css module for styling
4. Render the page and see that the custom styling doesn't take affect

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  System:
    OS: Linux 4.14 Amazon Linux 2
    CPU: (4) x64 AMD EPYC 7571
    Memory: 10.07 GB / 15.53 GB
    Container: Yes
    Shell: 4.2.46 - /bin/bash
  Binaries:
    Node: 14.15.4 - /usr/bin/node
    npm: 7.10.0 - /usr/bin/npm
  Managers:
    pip2: 18.0 - /usr/bin/pip2
    pip3: 9.0.3 - /usr/bin/pip3
    Yum: 3.4.3 - /usr/bin/yum
  Utilities:
    Make: 3.82 - /usr/bin/make
    GCC: 7.3.1 - /usr/bin/gcc
    Git: 2.23.3 - /usr/bin/git
  Virtualization:
    Docker: 19.03.13 - /usr/bin/docker
  IDEs:
    Emacs: 25.3.1 - /usr/bin/emacs
    Nano: 2.9.8 - /usr/bin/nano
    VSCode: 1.61.2
    Vim: 8.1 - /usr/bin/vim
  Languages:
    Bash: 4.2.46 - /usr/bin/bash
    Perl: 5.16.3 - /usr/bin/perl
    Python: 2.7.18 - /usr/bin/python
    Python3: 3.7.9 - /usr/bin/python3
  Databases:
    SQLite: 3.7.17 - /usr/bin/sqlite3
  Browsers: Chrome, Edge

[siriwatknp]

Seems like it is your mistake in SCSS file.

.LightBulb {
  color: orange; // "orange" does not work, double-quote is invalid in CSS.
}

Here is a working sandbox I fork from you. https://codesandbox.io/s/peaceful-solomon-d0db0?file=/src/ProTip.js

[PraveenPeri]

My bad! But I don't see this working for some reason in our application. The MUI styles keep loading after my CSS despite the StyledEngineProvider hook. Any thoughts based on your experience?

[PraveenPeri]

@siriwatknp Actually, this is still not working. Notice the margin css I added in my original sandbox. That's not taking affect and this is the screenshot from the developer tools. See MUI margin css took precedence over mine

And here's the order of style tags in the html

[siriwatknp]

I dig a little bit deeper and I guess this is on NextJS. If you look at how NextJS insert style to head, you will see that the CSS (including SCSS) stylesheet is injected before the styles context (in this case is our emotion stylesheet) https://github.com/vercel/next.js/blob/ce3112048ffe53b0ac8e4c292cfd8ab3bbf9c5d6/packages/next/pages/_document.tsx#L752.

Related issues about injection order:

• CSS module styles overwritten by global styles vercel/next.js#31080
• Inconsistent loading order of CSS Modules vercel/next.js#30251

[PraveenPeri]

@siriwatknp Thanks for debugging this 👍🏻

[ShuPink]

I also struggled with this when trying to upgrade next.js (12) with (s)cssmodules to mui v5.

I found that I had to add prepend: true, when creating the cache. It's shown in the documentation, but wasn't there in the next.js example so I guess that threw me off a bit.

const cache = createCache({
  key: 'css',
  prepend: true,
});

I tested it in both dev and prod build and now my global and cssmodule injection order seems to be correct. Hope this might help.

[siriwatknp]

@ShuPink Thanks for the info! @PraveenPeri Can you try it out?

[PraveenPeri]

@ShuPink @siriwatknp Thanks for the workaround! That resolved the issue

[siriwatknp]

Anyone who would like to submit a PR to improve the example and docs is welcome!

[siriwatknp]

I dig a little bit deeper. At the built time, emotion styles are not at the top of head even though prepend: true is set (this is due to the styles provided to nextjs). When the site is hydrated on the client, emotion moves styles up to head if prepend: true is set. I wonder if the issue still persists (or a flash of broken styles) if users have a slow internet connection?

ref: https://github.com/emotion-js/emotion/blob/01cca604ca93c5fd3958c41045ecbcac72b65480/packages/sheet/src/index.js?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L97

[Parsa-Sedigh]

@siriwatknp Yes FOUC effect for my custom css module styles happens, if user has a slow internet connection, my custom styles don't apply until the site is hydrated, even though I'm using <StyledEngineProvider injectFirst> and <CacheProvider value={emotionCache}>(because of custom emotion cache)
I'm using:
@mui/material: 5.1.0
@emotion/react: 11.5.0
@emotion/server: 11.3.0
next: 12.0.7

[oliviertassinari]

#30381 should also improve the integration with Tailwind CSS with the /examples folder.

In the future, I think that we could consider having more examples. For instance, we could have:

• material-cra
• material-cra-ts
• material-next
• material-next-ts
• material-next-css-modules
• material-storybook
• joy-cra
• joy-cra-ts
• joy-next
• joy-next-ts
• joy-next-css-modules
• joy-storybook
• base-tailwind
• base-stiches
• base-css-modules

[ARMBouhali]

@oliviertassinari I think now we need other examples to accommodate for the experimental app directory introduced by next@13:

• material-next-app-dir
• material-next-app-dir-ts

In material-next[-ts] examples, the _document.js and _app.js files are still used. While in next@13 using the app directory, the two files are replaced by a single app/layout.(js,ts) file called 'root layout'. I'm not sure if imports from next/document and next/app are still needed or recommended.

Root Layout in Next@13