Cómo usar bibliotecas CSS-in-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 de ámbito aislado. El objetivo es admitir "CSS sombra" 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>¡de á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.