CSS-in-JS

Core Idea

Next.js suporta qualquer solução CSS-in-JS existente; inline styles funcionam direto, e styled-jsx vem embutido pra CSS escopado por componente.

Key Concepts

• styled-jsx: bundlado com o Next.js, gera "shadow CSS"-like escopado por componente via <style jsx>.
• <style jsx> vs <style global jsx>: o primeiro é escopado ao componente, o segundo aplica globalmente (ex.: body).
• CSS com JS desabilitado: em produção (next start) o CSS ainda carrega mesmo sem JS; em dev, JS é obrigatório pra Fast Refresh funcionar.

Code Examples

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p { color: blue; }
        div { background: red; }
        @media (max-width: 600px) {
          div { background: blue; }
        }
      `}</style>
      <style global jsx>{`
        body { background: black; }
      `}</style>
    </div>
  )
}

• O que demonstra: CSS escopado por componente (p, div) coexistindo com CSS global (body) na mesma árvore.

Anti-patterns

• Esperar CSS-in-JS de terceiros funcionar sem lib própria: apenas styled-jsx é embutido; Styled Components, Emotion etc. exigem instalação e setup próprios (ver exemplos oficiais no repo do Next.js).

Key Takeaways

1. styled-jsx é a única solução CSS-in-JS nativa do Next.js, sem instalação extra.
2. CSS de produção sobrevive mesmo com JS desabilitado no browser.
3. Outras libs (Styled Components, Emotion, Stitches etc.) precisam de configuração adicional, mas são compatíveis.

Connects To

• ch291 CSS: alternativas de estilização (Tailwind, CSS Modules) fora do universo CSS-in-JS.