CSS-in-JS

Il est possible d'utiliser n'importe quelle solution CSS-in-JS existante. La plus simple est les styles inline :

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

export default HiThere

Nous incluons styled-jsx pour fournir un support de CSS scopé isolé. L'objectif est de supporter du "shadow CSS" similaire aux Web Components, qui malheureusement ne supportent pas le rendu côté serveur et sont JS uniquement.

Voir les exemples ci-dessus pour d'autres solutions CSS-in-JS populaires (comme Styled Components).

Un composant utilisant styled-jsx ressemble à ceci :

function HelloWorld() {
  return (
    <div>
      Bonjour le monde
      <p>scopé !</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

Veuillez consulter la documentation styled-jsx pour plus d'exemples.

Désactiver JavaScript

Oui, si vous désactivez JavaScript, le CSS sera toujours chargé dans la version de production (next start). Pendant le développement, nous requérons que JavaScript soit activé pour fournir la meilleure expérience de développement avec Fast Refresh.