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
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
Duplicates
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:
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
Originally posted by @shorcy in https://github.com/mui-org/material-ui/issues/29637
Originally posted by @oboha55 in https://github.com/thebaselab/codeapp/issues/322