Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Styliser avec le Fichier CSS | Stylisation dans les Applications React
Maîtrise de React
course content

Contenu du cours

Maîtrise de React

Maîtrise de React

2. Stylisation dans les Applications React
3. Hooks et Contexte React
4. React in the Real World

book
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 :

1. Comment doit-on importer un fichier CSS dans un fichier de composant React ?

2. Quel attribut est utilisé pour appliquer des classes CSS aux éléments React ?

Comment doit-on importer un fichier CSS dans un fichier de composant React ?

Comment doit-on importer un fichier CSS dans un fichier de composant React ?

Sélectionnez la réponse correcte

Quel attribut est utilisé pour appliquer des classes CSS aux éléments React ?

Quel attribut est utilisé pour appliquer des classes CSS aux éléments React ?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5
We're sorry to hear that something went wrong. What happened?
some-alt