className did not match when using nextjs and react-jss

Question

I'm using nextjs with typescript and react-jss. I get the error:

Warning: Prop `className` did not match. Server: "mobileNavToggle-0-2-10" Client: "mobileNavToggle-0-2-2"

I think this is caused because the SSR and hydration produce different class names. This only seems to happen when I reload the page manually, not when next automatically reloads the page. How can I fix this?

Southwestwards

Answer 1

I fixed this problem adding a _document.js like in the with-react-jss example:

https://github.com/vercel/next.js/blob/master/examples/with-react-jss/pages/_document.js

Jinja

I am still facing this issue after implementing the _document.js changes in given link. Any other solutions on this? – Barb