Warning: Prop className did not match.
Problem
Examples bug report Example name with-styled-components 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/
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Warning: Prop className did not match.
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 🙏
Trust Score
12 verifications
- 1
Use 👍 on the initial issue instead of "+1" and "same problem".
Use 👍 on the initial issue instead of "+1" and "same problem".
- 2
If you do feel like posting +1 provide a clear and concise reproduction that is
If you do feel like posting +1 provide a clear and concise reproduction that is clearly reproducible. Otherwise the comment is not actionable.
- 3
This goes for any open-source project you're commenting on.
This goes for any open-source project you're commenting on.
Validation
Resolved in vercel/next.js GitHub issue #7322. Community reactions: 566 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep