profile
viewpoint

Ask questionsWarning: Prop className did not match.

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

57497472-7b657c00-72e0-11e9-84c5-e7e5fa0d351c

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/

zeit/next.js

Answer questions probablyup

Hey there, please update babel-plugin-styled-components to the latest version which should fix css prop mismatches: https://github.com/styled-components/babel-plugin-styled-components/releases/tag/v1.10.1

I've noticed an error message in development still, but no ill effects from it so can be safely ignored.

useful!
source:https://uonfu.com/
answerer
Evan Jacobs probablyup Aurora Solar Boston, MA https://probablyup.com FE guy that wears a lot of black shirts. Formerly @butcherbox, Sesame, @Zocdoc, @enigma-io, and @yahoo.
Github User Rank List