Sommaire

Ajouter du style Style:CSS

Jusque-là, nous nous sommes occupés du contenu à afficher, pas vraiment de l’aspect visuel. Il est bien évidemment possible d’utiliser du CSS avec React, voyons comment.

Tout d’abord, la première chose à savoir est que dans la mesure où le contenu généré n’est constitué que d’éléments HTML bien standards, il est tout à fait possible d’utiliser une feuille de styles CSS, comme avec du HTML classique.

Il suffit :

  • de créer un fichier style.css dans le dossier public contenant nos styles ;

  • dans le fichier index.html, d’ajouter une balise <link> pour faire référence à cette feuille de style ;

  • dans nos composants d’ajouter les classes aux balises à l’aide de la propriété className.

Non seulement cette méthode fonctionne, mais elle est même utilisée par de nombreux développeurs, en raison de la similitude avec ce qui est fait depuis des années lorsqu’on écrit du HTML ou qu’on le génère avec du PHP par exemple.

Cependant la philosophie de React veut plutôt que l’on réfléchisse en termes de composants au maximum autonomes. Il serait donc dommage de séparer d’un composant les styles CSS qui le concernent.

La première option pour rapprocher un composant de ses styles consiste à définir une feuille de style par composant. Par exemple, ...