question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Different classes on server and client when using css prop

See original GitHub issue

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/

Annotation 2019-05-10 045959

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
probablyupcommented, May 11, 2019

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ı notifications@github.com 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 .

1reaction
probablyupcommented, May 11, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS selectors - Learn web development | MDN
In this article we've introduced CSS selectors, which enable you to target particular HTML elements. Next, we'll take a closer look at type, ......
Read more >
The css Prop - Emotion
The primary way to style elements with emotion is the css prop. It provides a concise and flexible API to style your components....
Read more >
server & client className did not match - Stack Overflow
I am using css modules to import css for sepecific components. Now the problem is while importing styles in a component the server...
Read more >
Advanced Usage - styled-components
styled-components generates an actual stylesheet with classes, and attaches those classes to the DOM nodes of styled components via the className prop. It ......
Read more >
HTML class Attribute - W3Schools
To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found