Warning: Prop className did not match.

[th0th]

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/

[kumarabhirup]

Happens to me everytime. +1

[Tomekmularczyk]

The same happens with Next v.7. This error doesn't occur when the server starts, only after making changes in the code.

[elliotbonneville]

I'm seeing the same error. It doesn't appear to affect the live app, but it's very annoying to have it constantly appearing locally.

I have a similar error, but with inline style.

Warning: Prop `style` did not match. Server: "height:50px;margin-left:4vw;cursor:pointer;width:auto;margin-top:0px" Client: "height:30px;margin-left:4vw;cursor:pointer;width:auto;margin-top:6px"

😢

[th0th]

I hope once enough people raise their voices here this issue will get attention 🙂

[SarKurd]

I face this issue in my simple navbar active className, is there a workaround until official fix?

[timneutkens]

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 🙏

[c0b41]

Seems like they fixed latest release this bug styled-components/styled-components#2563

[th0th]

Nope, that's a totally different log message, it is the one with yellow background on the screenshot I posted, it disappeared after the update.

First one, warning about different classNames is still there.