CSS-in-JS

Es ist möglich, jede bestehende CSS-in-JS-Lösung zu verwenden. Die einfachste sind Inline-Styles:

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}

export default HiThere

Wir bündeln styled-jsx, um Unterstützung für isoliertes, scoped CSS zu bieten. Das Ziel ist die Unterstützung von "Shadow CSS" ähnlich wie Web Components, die leider kein Server-Rendering unterstützen und nur JS-basiert sind.

Siehe die obigen Beispiele für andere beliebte CSS-in-JS-Lösungen (wie Styled Components).

Eine Komponente, die styled-jsx verwendet, sieht folgendermaßen aus:

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>
  )
}

export default HelloWorld

Weitere Beispiele finden Sie in der styled-jsx-Dokumentation.

Deaktivieren von JavaScript

Ja, wenn Sie JavaScript deaktivieren, wird das CSS im Produktionsbuild (next start) trotzdem geladen. Während der Entwicklung ist JavaScript erforderlich, um die beste Developer Experience mit Fast Refresh zu bieten.