Appliquer du style CSS à nos composants

Dans une application React, la présentation de l'interface est primordiale, ce qui est tout à fait naturel puisqu'on parle du frontend. Donc, le design et la présentation de l'interface graphique c'est ce qui frappe au yeux le premier quand une application est chargée. De plus, un bon design et un agencement propre des éléments de la vue contribuent significativement à l'amélioration de l'expérience utilisateur (UX).

Pour intégrer des styles CSS à une application React, il existe de nombreuses méthodes, en l'occurrence, l'utilisation des feuilles de styles externes (importées), l'intégration d'un inline CSS, l'utilisation de CSS Modules et l'adoption d'un frameworks approprié comme Tailwind CSS.

Utiliser des feuilles de styles externes (importation de styles)

Dans la leçon consacrée à la création d'une nouvelle application React, nous avons exploré l'environnement de travail qui a été généré automatiquement (à travers l'outil create-react-app) et nous avons identifié les fichiers et dossiers importants d'un projet React. Parmi les dossiers les plus importants, il y a src qui renferme les codes des composants ainsi que d'autres ressources importantes, en l'occurrence, les fichiers index.css et App.css.

Bien que ces deux fichiers là puissent servir à la même chose, il est conseillé de consacrer le fichiers index.css aux styles globaux de l'application, comme les arrière-plans, les marges, les polices... Quant au fichier App.css, il est surtout prévu pour styler les composants de façon personnalisée.

On considère maintenant que l'on va nous servir du fichier App.css.

On commence par vérifier si le fichier App.css est bien importé dans le fichier App.js qui implémente le composant principal. Normalement, si vous n'avez pas modifié le code après la génération du projet, cette importation est déjà faite. En tout cas, vous devriez avoir cette instruction d'importation:

Dans le fichier App.css, vous avez du CSS classique, c'est à dire, des sélecteurs et des propriétés CSS. On peut aussi avoir des règles at (@) comme les importations, les media queries, les keyframes... Je vous renvoie vers mon cours de CSS si vous voulez plus de détails.

Généralement, on préfère utiliser l'attribut class pour appliquer du CSS à nos éléments. Cependant, le mot-clé class étant réservé en Javascript (qui est le moteur du JSX), alors on utilise l'attribut className à la place, comme ceci:
Dans le fichier App.css on ajoute ce style par exemple:
Sur le navigateur, on est sensé avoir quelque chose comme ça:

Appliquer un inline CSS (Attribut de style local)

Un inline CSS s'applique localement aux éléments que l'on veut styler. Cela nous rappelle l'attribut de style local qu'on a vu dans le cours de CSS.

La différence avec le HTML, c'est que la valeur à appliquer à l'attribut style doit être un objet Javascript. Donc, si on reprend l'exemple précédent on devrait avoir quelque chose qui ressemble à ceci:
N'oubliez pas de procéder à l'interpolation JSX pour intégrer la valeur de l'attribut style, car il s'agit là d'une variable Javascript.
On peut intégrer l'objet Javascript qui fait office de style directement dans l'élément h1 comme ceci:
Cette fois, j'ai utilisé une écriture en camelCase pour le style composé.

CSS Modules - Un outil puissant pour éviter les conflits entre styles

Avec les applications React qui deviennent de plus en plus grandes, on est souvent amené à créer des feuilles de styles personnalisées que l'on importera ensuite selon le besoin. Le souci avec cette technique, c'est qu'il y a un grand risque de conflit entre styles. En effet, il se peut bien que l'on réutilise la même classe dans des feuilles différentes, ce qui engendrera une confusion souvent difficile à repérer. La solution consiste à rendre les classe uniques, c'est à dire, au moment de l'exécution de l'application, des noms de classes seront regénérés de telle sorte que leurs noms soient uniques. En plus, la portée des styles sera locale au composant qui a importé la feuille de style. Ce qui est plutôt très pratique.

Afin de réussir cette tâche on fait appel aux CSS Modules. Il s'agit simplement de fichiers CSS que l'on crée dans le dossier src et dont le nom est suffixé par .module.css.

Par exemple, on crée un fichier nommé App.module.css qui contient le style vu précédemment. Ensuite, dans le composant App on intègre le code suivant:
Dans l'importation, on doit indiquer le nom que l'on souhaite attribuer au module (styles dans notre cas). Ensuite, au moment de l'application du style, il suffit de préfixer la classe par ce nom là. Donc styles.h1class.

Si on inspecte l'élément h1 sur le navigateur, on aura quelque chose qui ressemble à ceci:
Vous avez remarqué que la classe a été renommée de telle sorte à ce qu'elle soit unique.

Utiliser un framework comme Tailwind CSS

Il existe de nombreux frameworks pour le CSS qui permettent d'appliquer un look rapidement en invoquant des styles prédéfinis mais personnalisables. Le plus célèbre est sans doute Boostrap qui facilite l'intégration d'un design responsive. Cependant, un autre framework nommé Tailwind CSS devient de plus en plus apprécié par les intégrateurs.

Tailwind CSS est un framework dit Utility-First. C'est à dire qu'il favorise l'utilisation d'une grande collection de classes prêtes à l'emploi. Contrairement à Bootstrap qui propose des styles pour des composants entiers (comme les boutons), Tailwind CSS propose des classes qui appliquent des styles de base comme les marges, les bordures, les polices... En combinant ces classes là, on obtient un design complet des composants tout en conservant l'originalité.