6

No Next.js, podemos inserir a estilização direto no componente através da tag <style jsx>, como no exemplo:

function Vitro() {
    return (
        <div className="vitro">
            <style jsx>{`
                .vitro {
                    background-color: blue;
                }
            `}</style>
        </div>
    );
}

Entretanto, ao remover a propriedade jsx de <style jsx>, tudo continua a funcionar normal. O que então faz esse atributo?

1

2 Respostas 2

5

Isto é a sintaxe de uma biblioteca padrão do NextJS, esta se chama Styled JSX, e o fato de se usar <style jsx> é para não se confundir com a própria tag <style> do HTML.

O que tem de especial nela é que ela encapsula e mantém o escopo do estilo no seu componente, sem afetar outros componentes, oque permite você alterar/excluir/criar códigos de estilo sem se preocupar com efeitos colaterais.

<style jsx> é a tag que indica o inicio do escopo e da estilização. Exemplo:

// pages/index.js
function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <p>Let's explore different ways to style Next.js apps</p>
      <style jsx>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
      `}</style>
    </div>
  )
}

export default Home

O código de estilo acima, se aplica somente ao componente Home(), ou seja, somente o <p> e a div de classe container serão afetados pelas regras de estilização e mesmo que outros componentes tenham esse elemento <p> ou classe container, eles não serão afetados.

É possível criar estilos globais com essa tag, basta passar o atributo global:

// pages/index.js
function Home() {
  return (
    <div className="container">
      <h1>Hello Next.js</h1>
      <p>Let's explore different ways to style Next.js apps</p>
      <style jsx global>{`
        .container {
          margin: 50px;
        }
        p {
          color: blue;
        }
      `}</style>
    </div>
  )
}

export default Home

Isto aplica estilizações para todos os elementos p ou de classe container nesta página.

4

De fato não é a mesma coisa.

Quando você adiciona a prop jsx, o "compilador" (trata-se de um plugin do Babel) reconhece que a biblioteca styled-jsx deve assumir a "estilização". A partir daí, o plugin do Babel realizará as devidas transformações no estilo, que não são feitas com o <style> "padrão" do HTML.

Veja esse comportamento no código-fonte do plugin – repare que nada acontece se elementos <style> não possuirem a propriedade jsx.

Quando a propriedade jsx não é fornecida, nada acontece. A tag <style> é renderizada normalmente como qualquer outro elemento do DOM. Naturalmente, os estilos são aplicados.

Veja nas ferramentas do desenvolvedor a diferença entre o <style jsx> e <style> após o "pré-processamento" – nulo neste último caso.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .