Styliser avec le Fichier CSS

L'utilisation d'un fichier CSS pour styliser les composants React provient de la structure traditionnelle HTML-CSS. Voici un guide étape par étape sur la façon dont nous pouvons utiliser un fichier CSS pour styliser les composants React :

1. Créer un fichier CSS

Pour commencer, créez 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

Utilisez l'instruction 'import' pour importer des fichiers CSS dans le fichier du composant. Placez cette instruction d'importation en haut du fichier du composant. À l'intérieur des guillemets '', spécifiez le chemin de fichier approprié.

Exemple :

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

Remarque

Utilisez 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, utilisez deux points et une barre oblique ../.

3. Appliquer des styles au composant

Une fois les styles importés, votre composant prend conscience de la présence du CSS. Par conséquent, vous pouvez utiliser des sélecteurs CSS et des noms de classe pour styliser les éléments. La seule distinction est que, dans les applications React, nous utilisons l'attribut className au lieu de l'attribut class utilisé dans les fichiers HTML.

Exemple :

Nous pouvons maintenant utiliser les classes CSS container, title et description pour styliser les éléments au sein du composant Block.

Ajouter du style

À ce stade, nous pouvons ouvrir le fichier CSS et appliquer des styles aux noms de classe définis. Par exemple, le fichier index.css peut contenir les styles suivants :

En suivant ces étapes, nous appliquerons les styles définis dans le fichier CSS aux éléments correspondants dans le composant React.

Code complet de l'application :