Themes not working with styled-components

[robertvansteen]

I was running in to issues with next.js and styled-components for a big project, and in an attempt to try and isolate the problem I've cloned the styled-component example in the repo and added a simple theme, immediately I saw the issue. While the server renders the component fine, on the client the style disappears and React throws the famous warning Warning: React attempted to reuse markup in a container but the checksum was invalid.

I've created a repository to demonstrate this issue.
https://github.com/rovansteen/next-js-styled-components

All I basically did was replace the hardcoded color: red to color: ${props => props.theme.color}

[davidrossjones]

Any reason you are using styled-components@1.2.1?

I believe this is styled-components related. Upgrade to the latest 1.4.4 and this issue should go away...

Or alternatively use styled-components v2 beta (due for release in the coming weeks): https://github.com/styled-components/styled-components/tree/v2.

[robertvansteen]

I just cloned the example. But upgrading styled-components to 1.4.4 fixes the issue, might be good idea to update the example. Thanks @davidrossjones 👍

[timneutkens]

#1422

[rauchg]

Thanks @rovansteen for the detailed issue