Different classes on server and client when using css prop

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/

[probablyup]

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ı [e-mail] 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 https://github.com/styled-components/styled-components/issues/2538#issuecomment-491537570, or mute the thread https://github.com/notifications/unsubscribe-auth/AAELFVUOJM3OAUHDZTOSM3LPU4MLTANCNFSM4HL7FVUQ .

[probablyup]

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.