CSS-en-JS

Es posible usar cualquier solución CSS-in-JS existente. La más simple son los estilos en línea:

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

export default HiThere

Incluimos styled-jsx para proporcionar soporte para CSS con alcance aislado. El objetivo es admitir "CSS shadow" similar a los Web Components, que desafortunadamente no admiten renderizado del servidor y son solo JS.

Consulta los ejemplos anteriores para otras soluciones populares de CSS-in-JS (como Styled Components).

Un componente que usa styled-jsx se ve así:

function HelloWorld() {
  return (
    <div>
      Hola mundo
      <p>¡con alcance!</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

Consulta la documentación de styled-jsx para más ejemplos.

Deshabilitar JavaScript

Sí, si deshabilitas JavaScript, el CSS seguirá cargándose en la compilación de producción (next start). Durante el desarrollo, requerimos que JavaScript esté habilitado para proporcionar la mejor experiencia de desarrollador con Fast Refresh.