Different order of emotion css files injected on local and production

[mknmohit]

Current behavior:
I am currently using nextjs v12.1.0 material-ui (MUI v5.6.3) along with emotion v11 and tailwindcss v3.0.15.
Emotion style/CSS files should be injected above my custom styling files so that my custom styling can have more specificity.
I observed that the order of emotion style files injected into the head tag is different on local and different on production. On local, the emotion styling files are injected on top under the head tag, which seems to be correct. But on production it is not working as expected.

I have taken screenshots of both environments.

Styling files order on Local

Styling files order on Production

Currently, my code looks something like this:

import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
function App() {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={memoizedTheme}>{children}</ThemeProvider>
    </StyledEngineProvider>
  );
}

I noticed one more thing If I locally build the production using next build and serve the prod build locally using next start, then the order of styling file is working fine, i.e. emotion styling files are getting injected at the top. But when I deploy the production build to the actual test/live environment, the order of styling files is not as expected.

Expected behavior:
The order of emotion styling/css files should be injected on top of my head tag or injected above my custom styling/css files so that the specificity of my custom styling will have more priority.

Environment information:

• next version: 12.1.0
• react version: 17.0.2
• @emotion/react version: 11.9.0
• @emotion/styled version: 11.8.1
• @emotion/server version: 11.4.0
• @mui/material version: 5.6.3

[Andarist]

You can control where the styles should be injected by configuring insertionPoint on the cache

[srmagura]

Related issues:

• "Advanced approach" SSR with Next broken with react-dom 18 #2725
• React18 cache global style order incorrect. #2741

@mknmohit What version of Next are you using? This comment says their issue was fixed in Next 12.1.6. Though, I am not 100% sure if their issue is the same as your issue.

[StrikEr2909]

Next version is 12.1.0

[srmagura]

Try upgrading to to 12.1.6 and let us know if that fixes it.

[mknmohit]

@srmagura Thanks for the response. I tried again after upgrading next to v12.1.6 and it doesn't solve the problem 😞

[siriwatknp]

@mknmohit Not sure if this helps but nextjs v12.1.6 seems to have an issue. mui/material-ui#30410 is not precisely the same as yours but is related to stylesheet generation on the server-side.

Can you try upgrading next to canary?

[mknmohit]

Can you try upgrading next to canary?

@siriwatknp I tried the canary version, and it also didn't work. 😢

[siriwatknp]

@mknmohit I suspect that it is the configuration in your nextjs _document.js. Please have a look at this setup from the official repo.

Note that the version of next should be canary.

[kachkaev]

A couple of own findings on this topic: mui/material-ui#32916 (comment)

TLDR: I managed fix this problem by adding _document.tsx with <meta name="emotion-insertion-point" content="" />.

[felixelgato92]

I'm running into the same issue, and honestly this makes next.js awful for me. I'd rather just use a regular vanilla React app than deal with this non sense. I spent a few hours on a small project going crazy because my production build wasn't the same as the developer run. It also seems that similar issues have been going on for years, and they just seem to close out old ones, and put them into new issues so it has less votes.

[MetaMmodern]

Having same issue but without Next.js.
Our project uses material-ui(v4) and inside of it it used mui(v5) for one component with a custom mui theme.
Before it used webpack everything was fine. Now that I've update to use Vite the result is different in local build and deployment build. Which is wild, I should be able to repro the behaviour by doing a local build, but can't. The result of wrong css order is that that mui(v5) component doesn't have correct styles anymore.