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.