Ajouter un style

• 2 minutes

Lorsque vous utilisez React, vous créez du code HTML. La méthode de création est différente, mais le navigateur affiche toujours du HTML, du CSS et du JavaScript.

Nous pouvons même ajouter du CSS à nos composants pour leur appliquer un style. Pour ajouter des feuilles de style CSS à un composant, nous les référençons de la même façon que nous importerions une autre dépendance JavaScript.

Ajouter du CSS

1. Ajoutez un nouveau fichier au dossier src. Nommez-le index.css.

2. Ajoutez le style suivant au fichier :

   article {
       margin-left: 10%;
       margin-right: 10%;
       font-family: Verdana, Geneva, Tahoma, sans-serif;
       font-size: 18px;
   }
   

   N’hésitez pas à personnaliser ce style !

Importer le CSS

1. Ouvrez le fichier App.jsx.

2. Ajoutez la ligne de code suivante en haut du fichier :

   import './index.css'
   

3. Retournez dans votre navigateur et actualisez la page. Le site est mis à jour avec le nouveau style !