3.11 Ajouter un style CSS de base

Nous venons de créer le composant DepenseItem. Pour le styler, nous allons créer un fichier CSS dédié qui sera importé dans le composant. C'est une bonne pratique en React : chaque composant a son propre fichier de styles, ce qui rend le projet plus organisé et le CSS plus facile à maintenir.

Étapes du stylage

• Créer un fichier DepenseItem.css à côté du composant.
• Copier le code CSS fourni dans la leçon.
• Ajouter les classes correspondantes dans le JSX.
• Importer le CSS dans le composant.

Nous créons un fichier DepenseItem.css (attention à la majuscule). Le CSS de base utilise une convention BEM : la classe principale est depenses-item, et les sous-éléments sont nommés avec des doubles underscores comme depenses-item__description et depenses-item__price. Attention : ce sont bien deux underscores et non un seul, sinon les sélecteurs ne fonctionneront pas.

// DepenseItem.js
import "./DepenseItem.css";

function DepenseItem() {
  return (
    <div className="depenses-item">
      <div>28 mars 2022</div>
      <div className="depenses-item__description">
        <h2>Assurance voiture</h2>
        <div className="depenses-item__price">290 euros</div>
      </div>
    </div>
  );
}

Après avoir ajouté les classNames sur les div correspondantes et importé le fichier CSS dans DepenseItem.js, le composant prend forme : la date, le titre « Assurance voiture » et le montant 290 euros encadré en violet s'affichent correctement. Nous nous retrouvons dans le prochain cours pour aller plus loin sur l'affichage dynamique des données.