React - 6.5 Présentation des composants stylisés

Les composants stylisés sont une bibliothèque tierce qui associe un style à un composant React. Les styles restent limités à ce composant et n'affectent pas le reste de l'application. Cette leçon installe la bibliothèque et crée un premier bouton stylisé.

Installer la bibliothèque

Dans le terminal, installez styled-components avec npm. Une fois l'installation terminée, relancez le projet, puis rechargez la page du navigateur.

La bibliothèque s'ajoute au projet comme les autres dépendances, et reste disponible pour tous les composants.

npm install styled-components

Créer un bouton stylisé

Dans le fichier du bouton, importez styled depuis styled-components. Le bouton n'est plus un composant fonctionnel simple : c'est un élément stylisé, défini avec styled.button.

Les styles s'écrivent entre des accents graves, à l'intérieur de cette définition. Le nom du composant commence par une majuscule, comme Button.

import styled from 'styled-components';

const Button = styled.button``;

Remplacer l'ancien bouton

Le contenu de l'ancien bouton est copié dans la nouvelle définition. L'ancienne version est ensuite supprimée, pour éviter d'avoir deux fois le même bouton dans le fichier.

Le composant renvoie désormais ce bouton stylisé. La vidéo signale qu'une erreur peut apparaître à ce stade. Elle précise qu'elle sera expliquée dans la leçon suivante.

En résumé

styled-components s'installe avec npm. Un bouton devient un composant stylisé grâce à styled.button. L'ancien code est remplacé, et le style reste isolé dans le composant.

Points clés

• styled-components est une bibliothèque tierce pour styliser les composants React.
• npm install styled-components ajoute la bibliothèque au projet.
• styled.button crée un bouton qui porte ses propres styles.
• Les styles sont écrits entre accents graves.
• Les styles restent limités au composant, sans effet sur les autres.

Questions fréquentes

Qu'est-ce qu'un composant stylisé ?

C'est un composant React créé avec styled-components, qui porte ses propres styles. Ces styles ne touchent pas les autres composants.

Pourquoi supprimer l'ancien bouton ?

Parce que le bouton stylisé remplace le précédent. Garder les deux créerait une duplication inutile dans le fichier.

Faut-il recharger la page après l'installation ?

La vidéo le conseille, une fois que l'installation est terminée, pour que le projet prenne en compte la bibliothèque.