L'utilisation d'un fichier CSS pour styliser des composants React provient de la structure traditionnelle HTML-CSS. Voici un guide étape par étape sur la manière d'utiliser un fichier CSS pour styliser des composants React :

1. Créer un fichier CSS

Pour commencer, créer un fichier CSS séparé avec l'extension .css. Ce fichier peut être situé dans le même dossier que le composant ou dans un dossier dédié spécifiquement aux styles, où tous les fichiers CSS sont organisés ensemble.

Exemple :

2. Importer le fichier CSS

Utiliser l'instruction 'import' pour importer les fichiers CSS dans le fichier du composant. Placer cette instruction d'importation en haut du fichier du composant. À l'intérieur des guillemets '', spécifier le chemin d'accès approprié au fichier.

Exemple :

// Import the CSS file
import './index.css';

Si le fichier CSS se trouve dans le dossier styles, alors l'instruction d'importation aura la syntaxe suivante :

// Import the CSS file from a folder
import './styles/index.css';

Remarque

Utiliser la notation point et barre oblique ./ pour référencer un fichier dans le même répertoire. Pour accéder à un fichier en dehors du dossier actuel et naviguer vers le répertoire parent, utiliser deux points et une barre oblique ../.

3. Appliquer des styles au composant

Une fois les styles importés, votre composant reconnaît la présence du CSS. Par conséquent, il est possible d'utiliser des sélecteurs CSS et des noms de classes pour styliser les éléments. La seule différence est que, dans les applications React, on utilise l'attribut className au lieu de l'attribut class utilisé dans les fichiers HTML.

Exemple :

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Nous pouvons maintenant utiliser les classes CSS container, title et description pour styliser les éléments à l'intérieur du composant Block.

Ajouter du style

À ce stade, il est possible d’ouvrir le fichier CSS et d’appliquer des styles aux noms de classes définis. Par exemple, le fichier index.css peut contenir les styles suivants :

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

En suivant ces étapes, les styles définis dans le fichier CSS seront appliqués aux éléments correspondants du composant React.

Code complet de l'application :