Styliser les composants Next.js à l'aide de CSS

Comment styliser les composants React dans Next.js?

Comment stylisons-nous les composants React dans Next.js?

Nous avons beaucoup de liberté, car nous pouvons utiliser la bibliothèque de notre choix.

Mais Next.js est livré avecstyled-jsxintégré, car c'est une bibliothèque construite par les mêmes personnes travaillant sur Next.js.

Et c'est une bibliothèque assez cool qui nous fournit des CSS étendus, ce qui est excellent pour la maintenabilité car le CSS n'affecte que le composant auquel il est appliqué.

Je pense que c'est une excellente approche pour écrire du CSS, sans avoir besoin d'appliquer des bibliothèques ou des préprocesseurs supplémentaires qui ajoutent de la complexité.

Pour ajouter du CSS à un composant React dans Next.js, nous l'insérons dans un extrait de code dans le JSX, qui commence par

<style jsx>{`

et se termine par

`}</style>

À l'intérieur de ces blocs étranges, nous écrivons du CSS simple, comme nous le ferions dans un.cssdéposer:

<style jsx>{`
  h1 {
    font-size: 3rem;
  }
`}</style>

Vous l'écrivez dans le JSX, comme ceci:

const Index = () => (
  <div>
		<h1>Home page</h1>
	<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span> <span style="color:#a6e22e">jsx</span><span style="color:#f92672">&gt;</span>{<span style="color:#e6db74">`

h1 { font-size: 3rem; } `}</style> </div> )

export default Index

À l'intérieur du bloc, nous pouvons utiliser l'interpolation pour modifier dynamiquement les valeurs. Par exemple ici, nous supposons unsizeprop est passé par le composant parent, et nous l'utilisons dans lestyled-jsxbloquer:

const Index = props => (
  <div>
		<h1>Home page</h1>
	<span style="color:#f92672">&lt;</span><span style="color:#a6e22e">style</span> <span style="color:#a6e22e">jsx</span><span style="color:#f92672">&gt;</span>{<span style="color:#e6db74">`

h1 { font-size: ${props.size}rem; } `}</style> </div> )

Si vous souhaitez appliquer du CSS globalement, non étendues à un composant, vous ajoutez leglobalmot-clé vers lestyleétiqueter:

<style jsx global>{`
body {
  margin: 0;
}
`}</style>

Si vous souhaitez importer un fichier CSS externe dans un composant Next.js, vous devez d'abord installer@zeit/next-css:

npm install @zeit/next-css

puis créez un fichier de configuration à la racine du projet, appelénext.config.js, avec ce contenu:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Après avoir redémarré l'application Next, vous pouvez maintenant importer du CSS comme vous le faites normalement avec des bibliothèques ou des composants JavaScript:

import '../style.css'

Vous pouvez également importer un fichier SASS directement, en utilisant le@zeit/next-sassbibliothèque à la place.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: