What does the "jsx" prop do in Next.js' jsx <style?

Question

In Next.js, we can insert direct styling into the component through the tag <style jsx>, as in the example:

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

However, when removing property jsx of <style jsx>, everything continues to work normal. What then does this attribute?

Answer 1

This is the syntax of a standard library of Nextjs, this is called Styled JSX, and the fact that it is used <style jsx> is not to be confused with the tag itself <style> of HTML.

What’s special about it is that it encapsulates and maintains the scope of style in its component, without affecting other components, which allows you to change/delete/create style codes without worrying about side effects.

<style jsx> is the tag that indicates the start of the scope and stylization. Example:

// 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

The style code above applies only to the component Home(), that is, only the <p> and the div class container shall be affected by the stylisation rules and even if other components have this element <p> or class container, they will not be affected.

You can create global styles with this tag, just pass the attribute 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

This applies stylizations to all elements p or class container on this page.

Answer 2

In fact it’s not the same.

When you add to prop jsx, the "compiler" (it is a plugin babel) acknowledges that the library styled-jsx should assume the "stylization". From there, the plugin of Babel will carry out the appropriate transformations in style, which are not made with the <style> "standard" of HTML.

See this behavior on source code of plugin - note that nothing happens if elements <style> do not own the property jsx.

When property jsx is not provided, nothing happens. The tag <style> is rendered normally like any other DOM element. Naturally, styles are applied.

See developer tools for the difference between <style jsx> and <style> after "preprocessing" - null in the latter case.