Style tags are injected at the top of head in NextJS development mode

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

style tags are injected at the top of head in NextJS development mode

Expected behavior 🤔

As with the NextJS build result, a style tag must be injected at the last of the head element.

Steps to reproduce 🕹

Steps:

1. Go to https://stackblitz.com/edit/github-q3dayq.
2. After the app builds and the rendered screen appears on the right panel, press Shift + Cmd + C to click on this screen.
3. In the Elements tab, move the cursor to navigate to the Head tag.
4. Expand the Head element to see the style tags added to the top of the head element as follows.

Context 🔦

While using the NextJS + Tailwind + MUI library, i checked a problem in the NextJS development mode where the MUI component was not properly styled due to Tailwind normalize(base).

MUI component classes that have the same priority as classes in Tailwindcss Base are not styled properly because they are affected by the Tailwindcss Base that is loaded late.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

  System:
    OS: Linux undefined
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: latest => 11.7.1 
    @emotion/styled: latest => 11.6.0 
    @mui/base:  5.0.0-alpha.64 
    @mui/icons-material: latest => 5.2.5 
    @mui/material: latest => 5.2.8 
    @mui/private-theming:  5.2.3 
    @mui/styled-engine:  5.2.6 
    @mui/system:  5.2.8 
    @mui/types:  7.1.0 
    @mui/utils:  5.2.3 
    @types/react: latest => 17.0.38 
    react: latest => 17.0.2 
    react-dom: latest => 17.0.2 
    typescript: latest => 4.5.4 

[mnajdova]

@stegano the scenario described on both the docs and the documentation is when you use the Material UI components, and Tailwind CSS for overrides or simply as a styling mechanism. In this scenario, you would always want the Tailwind CSS to be loaded after Material UI’s styles, so that when you add a Tailwind class on an element, it would override the Material UI default styles for that component.

For the CssBasline, I would say you should check what works for you. You can also do a combination of both if that makes more sense. There are some conflicts with the styles Tailwind provide and what the Material UI component expect to be loaded by default, so some things may not behave correctly.

[stegano]

@ZouYouShun It’s a temporary measure, but try this example

• https://stackblitz.com/edit/github-cs3o6u
  • The createCacheEmotion file was modified in the original example code.

In NextJS development mode, style tags are still injected with css top of the head element, but style tags are injected again at the end of the head element by createEmotionCache.

It seems that StyledEnginProvider is always called when MUI component is first loaded in NextJS development mode ( NODE_ENV=development). 🤔