Different order of emotion css files injected on local and production

[mknmohit]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am currently using 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>
  );
}

Que: Am I importing StyledEngineProvider from the wrong location?

I noticed one more thing If I locally build the production using next build and serve the prod build locally using yarn 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.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.4
  Binaries:
    Node: 17.7.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.5.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.5
  npmPackages:
    @emotion/react: 11.9.0 => 11.9.0
    @emotion/styled: 11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.78
    @mui/lab: 5.0.0-alpha.81 => 5.0.0-alpha.81
    @mui/material: 5.6.3 => 5.6.3
    @mui/private-classnames:  5.7.0
    @mui/private-theming:  5.7.0
    @mui/styled-engine:  5.7.0
    @mui/system:  5.7.0
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @mui/x-data-grid: 5.10.0 => 5.10.0
    @mui/x-date-pickers: 5.0.0-alpha.2 => 5.0.0-alpha.2
    @types/react: 17.0.38 => 17.0.38
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: 4.5.4 => 4.5.4

[mnajdova]

You can follow this guide for setting up Material UI & Tailwind CSS - https://mui.com/material-ui/guides/interoperability/#tailwind-css or start from the example project - https://github.com/mui/material-ui/tree/master/examples/tailwind-css

If it is related to the porstals, this is probably more relevant issue - #33017

[kachkaev]

For those who are here from search, here are my findings: following an official setup example helps indeed. I had an issue with clashing MUI and Tailwind inside a Next.js app with pages router. I fixed it by copying _document.tsx and a bunch of other files from here: https://github.com/mui/material-ui/tree/master/examples

I looked into an example named material-ui-nextjs-pages-router-ts, but you may need to use a different one depending on your case. Examples may change over time, so a link to a specific one can end up broken. It’s best to check the latest ones available.

After adding <meta name="emotion-insertion-point" content="" /> to a new custom _document.tsx and copying a few more things into my codebase, the issues with prod styles were gone! Emotion styles now mount into a predictable place and seem to not ‘trump’ Tailwind ones in prod as before.

A couple of other things I enabled, based on MUI interop docs:

• "important: "__next" in tailaind.config.ts
• ``#__nextelement ascontainer` prop in MuTheme (step 5 at the time of writing)

---

This same issue in emotion repo: emotion-js/emotion#2764