Next.js Discord

Discord Forum

CSS Not rendering

Unanswered
British Shorthair posted this in #help-forum
Open in Discord
British ShorthairOP
Hello, I have a next.js application that I am working on. The css works fine but when I use my navbar to switch pages, the css for the newly rendered items on the page do not render with the correct styles. However, if I refresh the page, the styles will appear correctly.

12 Replies

@joulev Do you use <head dangerouslySetInnerHtml={…} /> somewhere?
British ShorthairOP
No I have not used that in my code
@British Shorthair No I have not used that in my code
joulev
Can you make a minimal reproduction repository?
@joulev Can you make a minimal reproduction repository?
British ShorthairOP
Yeah Ill make one.
This replicates the issue. When you press the navbar and switch pages the media wont have the correct style. But if you refresh the page the media will change to the correct color
@British Shorthair https://github.com/coreyheckel3/test
joulev
you need to import the css file to _app for it to be available in all routes
@joulev you need to import the css file to _app for it to be available in all routes
British ShorthairOP
I just tried that and I am still having the same issue
joulev
alright will have a look when i get home
@joulev alright will have a look when i get home
British ShorthairOP
Hey did you get the chance to take a look at it?
@British Shorthair Hey did you get the chance to take a look at it?
joulev
i had a look. now this is what i found out:
* the css file is still loaded normally.
* BUT: if you navigate via <Link>, the MUI styles override the css file, whereas if you do a browser refresh, the MUI styles are overridden by the css file. hence causing this behaviour.

which means how you currently do styling is almost certainly incompatible with MUI. but i don't use MUI so i don't know how to do it right. i avoid MUI exactly for this kind of headache.