Comment utiliser les bibliothèques CSS-in-JS

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

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

export default HiThere

Nous incluons styled-jsx pour fournir un support des CSS scopés isolés. L'objectif est de supporter le "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 de styled-jsx pour plus d'exemples.

Désactivation de JavaScript

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