CSS-en-JS

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

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

export default HiThere

Incluimos styled-jsx para proporcionar soporte para CSS con ámbito 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 ámbito!</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.