Styles not applied in first load using Material-UI & Next.js [@mui/styles]

[daniielp]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using @mui/styles (Styles legacy) I seem to be getting a issue when deploying the application where a lot of the styles are loaded after the dom has reandered. Even though I use the ServerStyleSheets in my _documents.tsx, and create and use the theme in _app.tsx.

I do not understand why the style is not applied at the first time, on the first load.

Expected behavior 🤔

What should is that when rendering the page the first time all the style changes should already be there. but takes a small bit of time before it does.
https://imgur.com/a/ZujFrXd

Steps to reproduce 🕹

Steps:

1. Open up the codesandbox https://codesandbox.io/s/relaxed-smoke-i6721
2. Refresh the page when it's done loading and you will see that the Header Logo + text switching background colour. Because some style changes maybe haven't loaded correctly in the beginning.

Context 🔦

What I'm trying to accomplish is for my production build to look like my local development on initial load.

I think the issue lays in either the _documents.tsx or _app.tsx.

I have attached a link to the 2 images for how it looks in local development and production.
https://imgur.com/a/ZujFrXd

Your environment 🌎

System:
OS: Windows 10 10.0.19043
Binaries:
Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Version 95.0.4638.69 (Official Build) (64-bit)
Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.44)
npmPackages:
@emotion/react: ^11.5.0 => 11.5.0
@emotion/styled: ^11.3.0 => 11.3.0
@mui/core: 5.0.0-alpha.53
@mui/lab: ^5.0.0-alpha.53 => 5.0.0-alpha.53
@mui/material: ^5.0.6 => 5.0.6
@mui/private-theming: 5.0.1
@mui/styled-engine: 5.0.2
@mui/styles: ^5.0.2 => 5.0.2
@mui/system: 5.0.6
@mui/types: 7.0.0
@mui/utils: 5.0.1
@types/react: ^17.0.34 => 17.0.34
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.3.5 => 4.3.5

[daniielp]

@hbjORbj I have updated the link to use codesandbox instead.

[mnajdova]

@shorcy the SSR configuration is not complete. As you are using both @mui/material and @mui/styles you need to configure both JSS and emotion. You can see instructions in the following examples project of how it can be done:

• v4 JSS - https://github.com/mui-org/material-ui/tree/v4.x/examples/nextjs
• v5 emotion - https://github.com/mui-org/material-ui/tree/master/examples/nextjs

Make sure to combine both implementations.

---

Are you intentionally using both JSS and emotion? I would recommend using only emotion, for overrides you can use the styled() or the sx prop, or use the tss-react which is similar implementation to makeStyles but uses emotion (Note that for using tss-react you may need to configure it a bit differently, check their repo).

[mnajdova]

I am closing the issue. Instructions for fixing it were provided. If there is another issue feel free to re-open.

[daniielp]

After spending a lot of time updating the repo to use SX prop and updating _app and _document to use emotion cache instead. I still be having the same issue now just with different colors.
The new code can be found here: https://codesandbox.io/s/hopeful-bush-5jbz8.

But the issue is now only visible on the live site (Hosted with vercel).
https://daniiel.dev/

[devrzztech]

I had the same problem, How did I fix it? Just don't use makeStyles library and put the code inside of the sx={{ code styles }}. It's working fine on development and production

[mnajdova]

@devrzztech see #30410

[btdtech]

Hi @mnajdova I am experiencing the same issue.

I followed the repo provided by MUI (https://github.com/mui/material-ui/tree/HEAD/examples/nextjs-with-typescript).

The theme is applied in local dev but not when I deploy to production. (https://btdtech.io/)

As you can see from the website, when you first visit it there is no styling applied. If you use the link to navigate to the ABOUT page then you will see it styled. However if you refresh the ABOUT page, the styling disappears again.

This is the link to the repository for your perusal https://github.com/btdtech/company-website.

Look forward to your reply!

Bac

[btdtech]

Hi everyone,

I have been digging and it seems that Emotion cache's style component has to style. Do we know why this is? I really would like to get to the bottom of this, otherwise I might have to find another CSS solution.

Cheers,

Bac

[btdtech]

Hi everyone,

Just want to let you know that @siriwatknp found the solution for it.

#30410 (comment)