Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Warning: Prop className did not match.
See original GitHub issueExamples bug report
Example name
Describe the bug
Also posted here: #2538
Using css prop introduced with styled-components v4 causes Warning: Prop className did not match..
To Reproduce
Add any HTML element with css prop.
Expected behavior
Correctly styled rendering on the server side without any warnings.
Screenshots
System information
- OS: Windows
- Chrome
- Version of Next.js: 8.1.0
Additional context
Here is an example I created to demonstrate the issue: https://codesandbox.io/embed/jlwvwyy0ow
Open this and refresh once the building is done: https://jlwvwyy0ow.sse.codesandbox.io/
Issue Analytics
- State:
- Created 4 years ago
- Reactions:787
- Comments:273 (28 by maintainers)
Top Results From Across the Web
Warning: Prop `className` did not match. when using styled ...
That error is showing you the class that is being created by your styled-components library on the server and how it is different...
Read more >Fixing ClassName did not match error - DEV Community
Warning : Prop `className` did not match. Server: Client: This is probably one of the most annoying problem with ...
Read more >Solving the Styled Components Warning in Next.JS with Babel
Warning : Prop `className` did not match. Server: “fs-fdsf” Client: “sd-dfasj”. The combination of Next.JS and Styled Components is truly ...
Read more >Prop `className` did not match - CodeSandbox
VS Code's tsserver was deleted by another application such as a misbehaving virus detection tool. Please reinstall VS Code. Manage Extension.
Read more >Prop `className` did not match. Server.... react js next js ...
Related Query · React + Material-UI - Warning: Prop className did not match · Material-UI with Next. · Class name hydration mismatch in...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Use 👍 on the initial issue instead of “+1” and “same problem”.
If you do feel like posting +1 provide a clear and concise reproduction that is clearly reproducible. Otherwise the comment is not actionable.
This goes for any open-source project you’re commenting on.
Thanks 🙏
Happens to me everytime. +1