Different classes on server and client when using css prop

[th0th]

I get this warning when using styled-components 4.2.0 with next.js 8.

Warning: Prop className did not match. Server: "sc-cJSrbW kQAtac" Client: "sc-htoDjs iZPNuM"

The only step needed to reproduce is to add something like this in a page on the default next.js example:

<div
  css="margin-top: 20px;"
>
  Just some text
</div>

or

<div
  css={css`margin-top: 20px;`}
>
  Just some text
</div>

Here is a codesandbox:
https://codesandbox.io/embed/jlwvwyy0ow
https://jlwvwyy0ow.sse.codesandbox.io/

[quantizor]

There's something weird going on with nextjs in dev mode (I see this in my projects as well), but the issue does not go through to production in my experience.

[th0th]

Thanks for the reply @probablyup. So do you just ignore those warnings in development mode? The number of warnings goes up as I keep adding more css props and it is annoying :)

[quantizor]

Yeah I’ve just been ignoring them. We are removing that warning anyway so don’t worry about it 👍

…

On Sat, May 11, 2019 at 2:23 PM Gökhan Sarı ***@***.***> wrote: Thanks for the reply @probablyup <https://github.com/probablyup>. So do you just ignore those warnings in development mode? The number of warnings goes up as I keep adding more css props and it is annoying :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2538 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAELFVUOJM3OAUHDZTOSM3LPU4MLTANCNFSM4HL7FVUQ> .

[mxstbr]

/cc @timneutkens for visibility (not sure there's anything actionable for you to do here), this happens in my projects too.

[timneutkens]

We don't really do anything weird here, just webpack HMR and re-rendering. Could you file an issue on Next.js so that I can add labels for people to look into it.

[th0th]

@timneutkens Here it is: vercel/next.js#7322

[quantizor]

@th0th this should be fixed with the latest babel plugin patch version, thanks for reporting! https://github.com/styled-components/babel-plugin-styled-components/releases/tag/v1.10.1