CSS-in-JS

Es ist möglich, jede bestehende CSS-in-JS-Lösung zu verwenden. Die einfachste ist 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 isolierte, bereichsbezogene CSS zu bieten. Das Ziel ist es, "Shadow CSS" ähnlich wie Web Components zu unterstützen, die leider Server-Rendering nicht unterstützen und nur JS-basiert sind.

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

Eine Komponente mit styled-jsx sieht so 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

Bitte sehen Sie in der styled-jsx-Dokumentation nach weiteren Beispielen.

JavaScript deaktivieren

Ja, wenn Sie JavaScript deaktivieren, wird das CSS in der Produktions-Build (next start) trotzdem geladen. Während der Entwicklung benötigen wir JavaScript, um die beste Entwickler-Erfahrung mit Fast Refresh zu bieten.