Méthodes de stylisation des composants React

Il existe de nombreuses méthodes différentes pour styliser les composants React. Ici, nous en examinerons quelques-unes des principales.

L'approche standard que nous pouvons appliquer, comme pour le stylisme classique des pages web, est l'utilisation du CSS global. Ici, nous créons un seul fichier CSS externe partagé contenant les styles. Avec cette approche, tous les noms de classes se trouvent dans la portée globale, ce qui peut entraîner des conflits entre eux. Il est aussi possible de créer de nombreux petits fichiers CSS. Cette approche est peu efficace pour créer des applications importantes et évolutives.

L'approche suivante est la stylisation en ligne, en l'utilisant, nous pouvons ajouter les styles CSS en ligne, comme on le fait dans le HTML classique. Dans ce cas, nous travaillerons avec l'attribut style, en lui passant les propriétés CSS nécessaires. L'utilisation d'une telle stylisation est considérée comme une mauvaise pratique et est recommandée uniquement pour ajouter des styles calculés dynamiquement pendant le rendu. Cette méthode est pratique pour le prototypage rapide de l'interface d'un composant individuel.

Les deux méthodes suivantes que nous examinerons sont modernes, gagnent en popularité, ce sont des moyens efficaces de stylisation. Ce sont précisément les méthodes recommandées pour la stylisation de grandes applications React évolutives.

La première est l'utilisation de la bibliothèque Styled Components, qui utilise pour la stylisation des littéraux de gabarits. Cette méthode nous permet d'écrire du CSS classique dans le code JS, en utilisant toute sa fonctionnalité.

La deuxième méthode est l'utilisation des modules CSS. Dans ce cas, un module CSS est un fichier CSS dans lequel par défaut tous les noms de classes et d'animations se trouvent dans une portée locale, c'est-à-dire accessibles uniquement à l'intérieur du composant qui l'utilise.

Avec ces deux dernières méthodes, nous pouvons ne pas craindre les conflits entre les noms de classes, car ils sont uniques - la concept de portée locale est utilisée. Aussi, leur utilisation élimine le besoin de la méthodologie BEM.

Dans les prochaines leçons, nous examinerons plus en détail toutes les méthodes présentées ici.