CODEWITHSUNDEEP
cssreactjsmaterial-uinext.js
SC K
SC K

Reputation: 197

Nextjs Material UI CSS not loading properly on first visit

I am using Nextjs with Material UI and Material UI CSS doesnt load properly on first page load like the picture wrong look like this on first visit enter image description here

correct one with correct style after a page transition enter image description here

(there are alot of other instances for example elements like header with fixed position are not in their place etc ... )

but when I transition from one page to the other or even trigger a setState command everything goes to its place and CSS gets applied. I think this is because of class name mismatch between server and client I have applied the _app and _document from this link and the issue still persists.

so there is only one option for me and that is to add a Twitter or Instagram like first page load into the site so if this is the first visit it gets showed to user then because of call to set some state everything shows properly. So how can I detect in nextjs if this is the first page visit from a user into the site and I dont want to use the context provider cause then I have to add the consumer to every page and the site has alot of pages

is there any workaround or solution for this problem I have been searching for an answer for weeks and I have asked the creators of Material UI and they said that with some upcoming upgrade it will get fixed but untill then what should I do ?

Upvotes: 1

Views: 2366

Answers (1)

SC K
SC K

Reputation: 197

After so many days I noticed that in my _document.js file I have

import { ServerStyleSheets } from "@material-ui/styles";

I changed that to

import { ServerStyleSheets } from "@material-ui/core/styles";

and after that CSS got applied and I got rid of the flickering problems

Upvotes: 1

Related Questions