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.

Next.js: Broken styles when using styled-components

See original GitHub issue

Prerequisites

[…prerequisites]
Scoured StackOverflow

Expected vs Current Behavior

Simply put; SASS = styling works beautifully. styled-components = styling broken on initial page load, but applies on HMR.

Failure Information

Steps to Reproduce

Install via npx create-nx-workspace@latest sass --preset=next Selecting SASS for styling (note: styled-components unavailable here)
Remove the scss default
Add another app, selecting styled-components
Serve and check the apps

nx serve styled-components	nx serve sass

Context

nx report

  @nrwl/angular : Not Found
  @nrwl/cli : 8.7.0
  @nrwl/cypress : 8.7.0
  @nrwl/eslint-plugin-nx : 8.7.0
  @nrwl/express : Not Found
  @nrwl/jest : 8.7.0
  @nrwl/linter : 8.7.0
  @nrwl/nest : Not Found
  @nrwl/next : 8.7.0
  @nrwl/node : Not Found
  @nrwl/react : 8.7.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.7.0
  @nrwl/web : 8.7.0
  @nrwl/workspace : 8.7.0
  typescript : 3.4.5

environment

node: v12.12.0
npm: 6.11.3

3rd-party libraries: none
use case that failed: check above reproduction steps ☝️
repro: https://github.com/zynchro/nx-issue-repro-styled-components

Failure Logs

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

jaysoocommented, Feb 13, 2020

It’s possible if you override the document class and provide the babel plugins.

See example here: https://github.com/jaysoo/react-ssr-example/tree/master/apps/next-app

Going to close this issue since there is a solution, but we might look at enhancing the generated code when styled-components is chosen. Cheers!

1reaction

enjdusancommented, Dec 16, 2019

My issue was that server and client had a different classNames. I found a solution here: https://github.com/zeit/next.js/issues/7423

Top Results From Across the Web

Next.js and Styled-Components: style loading issue

Have you tried using Styled-Components with your Next.js app but can't get the styles to load properly? This is because the server-side ...

Style loading issue, screen flickering in Next.js with styled ...

When loading and reloading the page, it's just like the HTML, within milliseconds the styles are loaded. next.config.js /** @type {import('next ...

Why is styled-components so difficult on Next.js? - Reddit

IIRC, the refresh issues are due to React 18's double initial render, which only happens in dev with strict-mode on.

The best styling options for Next.js - LogRocket Blog

Pros of using styled-components with Next.js · Built using React in mind and has lots of community support · Dynamic styling based on...

Next.js With Styled Components Example - StackBlitz

# Example app with styled-components · This example features how you use a different · styling solution than · github.com/vercel/styled-jsx · supports universal ......