router.push() causes styles to be overridden
Unanswered
Anonymously Anonymous posted this in #help-forum
(Just began Next.JS, pretty amateur at this point, so umm the following might sound foolish, idk)
When I do
I realised that I was changing body's styles in
I want to know how to prevent one route's style being applied on another when I do
When I do
router.push("/")
from /wait
, /wait
's CSS styles get applied to /
, overriding globals.cssI realised that I was changing body's styles in
/wait/styles.css
so I tried giving the body tag in /wait/layout.js
as specific class but that leads to hydration error -> StackOverflow said we are supposed to prevent writing <html> and <body> in layout.js for all other routes apart from indexI want to know how to prevent one route's style being applied on another when I do
router.push()
1 Reply
If you do this, make sure to work with css modules. This way the styles are actually scoped to where they’re used and not overridden if the class names are the same but apply different styles.