Next.js Discord

Discord Forum

router.push() causes styles to be overridden

Unanswered
Anonymously Anonymous posted this in #help-forum
Open in Discord
(Just began Next.JS, pretty amateur at this point, so umm the following might sound foolish, idk)

When I do router.push("/") from /wait, /wait's CSS styles get applied to /, overriding globals.css
I 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 index

I 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.