Different classes on server and client when using css prop
See original GitHub issueI 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/
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:7 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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:
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.