Styliser vos applications React

Comment styliser les composants React

Dans cet article, nous allons voir différentes manières de styliser les composants React. Les méthodes de style que nous explorerons sont:

• Inline CSS
• styled-components
• Modules CSS
• Tailwind CSS

Nous utiliserons un composant faisant partie d’une application à faire pour expliquer chacune de ces méthodes.

Configurer votre application React

Pour configurer une application, vous pouvez utiliser create-react-app . C’est le moyen le plus simple de démarrer avec un projet React. Vous pouvez aussi lire cet article pour comprendre la structure du projet.

Commençons par la première méthode.

Méthode n ° 1: Inline CSS

Si vous êtes familier avec le HTML de base, vous saurez qu’il est possible d’ajouter votre CSS en ligne. Ceci est similaire dans React.

Nous pouvons ajouter des styles en ligne à tout composant React que nous voulons rendre. Ces styles sont écrits sous forme d’attributs et sont transmis à l’élément. Stylisons des parties de notre composant en utilisant des styles en ligne:

Nous venons d’ajouter des styles en ligne aux styles les plus externes divet h2. Voici quelques points à noter à ce sujet.

Premièrement, il y a deux accolades. Ce que nous rendons est écrit en JSX et, pour que les expressions JavaScript pures soient utilisées dans JSX, elles doivent être incluses entre accolades.

Le premier crochet bouclé injecte du JavaScript dans JSX. Les accolades internes créent un objet littéral. Les styles sont passés en tant que littéraux d’objet à l’élément.

La prochaine chose à noter est que les propriétés sont séparées par une virgule. C’est parce que ce que nous passons est un objet. Comme il s’agit d’un attribut JavaScript, les attributs sont écrits dans camelCase et ne sont pas séparés par des tirets.

Maintenant, dans le code ci-dessus, nous venons d’ajouter quelques propriétés aux éléments que nous avons stylisés. Cependant, imaginez que nous devions ajouter de plus en plus de styles à l’élément. C’est là que la méthode en ligne échoue car elle n’aura pas l’air propre.

Il existe cependant un moyen de contourner ce problème. Nous pouvons créer des variables d’objet et les transmettre aux éléments. Faisons cela alors.

Création d’une variable d’objet de style

Nous créons une variable d’objet de style de la même manière que nous créons un objet JavaScript. Cet objet est ensuite passé à l’attribut style de l’élément que nous voulons styliser.

Donc, au lieu d’ajouter directement les styles en ligne, comme nous l’avons fait dans l’exemple précédent, nous passons simplement les variables d’objet:

Dans le code ci — dessus, nous avons créé trois variables d’objet: TodoComponent, Headeret ErrorMessage. Nous transmettons ensuite ces variables à l'élément au lieu de les saisir directement.

Nous n’avons pas eu à utiliser de doubles accolades dans l’élément car ces variables sont elles-mêmes des objets.

Si vous regardez les propriétés de l’objet, les camelCases seront convertis en attributs CSS séparés par des tirets lors de la compilation. Par exemple, ceci:

En CSS simple, ceux-ci seront écrits comme suit:

La modification de camelCase en chaîne séparée par des tirets s’applique uniquement aux noms de propriété et non aux valeurs de propriété.

Il est possible de passer une variable en tant que valeur à une propriété. Donc, nous pouvons faire ceci:

Dans de nombreux environnements JavaScript, la création d’une variable d’objet globale peut être une mauvaise pratique, mais c’est bien dans React. Étant donné que les fichiers ne sont pas visibles pour les autres fichiers à moins qu’ils ne soient importés, nous pouvons créer autant de variables d’objet même avec le même nom sans aucun conflit.

Partage de styles entre de nombreux composants React

Les objets de style et les composants ne doivent pas nécessairement être dans le même fichier. Nous pouvons créer un fichier .js séparé pour nos styles, exporter ces styles, puis les importer dans le composant où nous voulons les utiliser. Cela rend les styles réutilisables dans plusieurs composants. Faisons cela pour notre composant.

Tout d’abord, nous allons créer un fichier .js distinct appelé . Ensuite, ajoutez ces styles:styles.js

Dans le code ci-dessus, nous pouvons choisir d’exporter chaque objet de style individuellement, mais cela signifiera également les importer individuellement. Cela peut devenir fastidieux s’il y a de nombreux objets de style dans le fichier.

Par conséquent, créer un objet contenant tous les styles n’a que du sens. Cet objet est exporté et importé une fois dans le composant où il sera utilisé. Alors faisons ça.

La ligne 4 est l’endroit où nous importons l’objet styles. Cet objet est ensuite utilisé pour styliser les composants de notre application React et est utilisé comme n’importe quel objet JavaScript.

Ce qu’il faut retenir de cela, c’est que les styles peuvent être utilisés et réutilisés dans plusieurs composants . Les styles doivent simplement être importés et ajoutés à l’attribut style.

Bien sûr, il y a des situations où vous ne devriez pas utiliser de style en ligne , et c’est là que nos prochaines méthodes entrent en jeu.

Méthode n ° 2: styled-components

Avec styled-components, nous pouvons écrire du CSS réel dans notre fichier JavaScript. Cela signifie que vous pouvez utiliser toutes les fonctionnalités de CSS comme les requêtes multimédias, les pseudo-sélecteurs, l’imbrication, etc… dans JavaScript.

styled -components utilise les littéraux de gabarit balisés d’ES6 pour styliser les composants. Avec lui, le mappage entre les composants et les styles est supprimé. Cela signifie que lorsque vous définissez vos styles, vous créez en fait un composant React normal auquel vos styles sont attachés.

En utilisant des composants stylisés, nous pouvons créer des composants réutilisables avec des styles. C’est assez excitant à créer et à utiliser. Expliquer ici avec un exemple nous fera beaucoup de bien.

Tout d’abord, nous devons l’installer, alors exécutez ce qui suit dans le répertoire de votre application React:

Revenons à notre application Todo et faisons en sorte que notre composant utilise des composants stylisés . Tout d’abord, nous allons importer le package:styled-components

Nous pouvons commencer à l’utiliser tout de suite. Nous allons d’abord créer un composant stylisé, puis nous verrons comment nous l’utiliserons:

Ci-dessus, nous avons créé un composant qui peut être utilisé de la même manière que n’importe quel composant React. Cependant, notez que nous utilisons du CSS pur dans un fichier JavaScript. Ensuite, mettons ce composant à utiliser:

Dans le code ci-dessus, nous avons utilisé le composant stylisé que nous avons créé — TodoComponent- à la ligne 5 comme nous utiliserons n'importe quel autre élément HTML. La seule différence est qu'il est livré avec ses propres styles prédéfinis.

Nous pouvons faire de même pour d’autres parties du composant:

Pour en savoir plus sur les composants stylisés et comment les utiliser, vous pouvez lire la documentation officielle ici .

Discutons maintenant de la troisième façon de styliser dans React.

Méthode n ° 3: modules CSS

Un module CSS est un fichier CSS dans lequel tous les noms de classe et les noms d’animation sont définis localement par défaut. Prenez note des mots à portée locale . Décomposons cela un peu.

Les noms de classe CSS et les noms d’animation ont une portée globale par défaut. Cela peut conduire à des conflits, en particulier dans les grandes feuilles de style; un style peut en remplacer un autre. C’est le problème résolu par les modules CSS. Les classes CSS ne sont disponibles que dans le composant où elles sont utilisées.

Un module CSS est essentiellement un fichier .css qui est compilé. Une fois compilé, il produit deux sorties. L’une est CSS qui est une version modifiée du CSS d’entrée avec les noms de classe renommés. L’autre est un objet JavaScript qui mappe le nom CSS d’origine avec le nom renommé.

Voyons un exemple de comment cela fonctionne. Cependant, si vous voulez creuser plus profondément, consultez cet article à ce sujet. Très bien, créons une classe CSS dans un module pour un exemple de message d’erreur. Le nom de notre module est :styles.css

Une fois compilé, cela produira quelque chose comme ceci:

L’ajout jhysest juste un exemple de clé (que j'ai ajouté moi-même) qui est utilisé pour identifier de manière unique cette classe. Comme dit précédemment, il produit un objet JS, qui peut être importé dans le fichier React et utilisé:

Voyons comment nous pouvons l’utiliser maintenant:

N’oubliez pas que l’objectif principal des modules CSS est de rendre les classes CSS étendues localement et d’éviter les conflits de dénomination.

Method #4: Tailwind CSS

Tailwind CSS propose une approche différente dans laquelle aucun CSS n’a besoin d’être écrit pour styliser une application. Au lieu de cela, Tailwind CSS utilise des classes utilitaires pour chaque propriété CSS que vous pouvez utiliser directement dans votre HTML ou JSX.

Vous vous demandez peut-être si chaque attribut CSS est mappé à une classe, quelle est la taille du bundle pour le CSS final? En fait, la taille du paquet est très petite, la plupart des projets expédiant des tailles de paquet inférieures à 10 Ko. Comment? Pendant la construction, Tailwind CSS traite les classes que vous utilisez et crée un bundle CSS adapté à votre projet.

Tailwind CSS offre bien plus que des classes CSS mappées à des attributs, c’est aussi un cadre complet qui prend en charge le comportement réactif, les grilles, les états, le mode sombre et il est hautement configurable.

Pour configurer Tailwind CSS sur un projet CRA, il y a quelques étapes (et bibliothèques) impliquées en raison de ce qu’il faut modifier le processus de construction de l’application pour générer les bundles CSS.

Commencez par installer les bibliothèques:

Notez que toutes les bibliothèques liées à Tailwind CSSsont installées en tant que packages de développement, ce qui signifie qu’elles n’affecteront pas la taille de votre bundle JS.

Maintenant, installons et configurons CRACO. Parce que CRACO ne vous permet pas de remplacer la configuration PostCSS de manière native, nous devons également installer CRACO pour pouvoir configurer Tailwind CSS:

Une fois installé, mettez à jour votre package.json pour utiliser CRACO au lieu de react-scripts:

Créons maintenant un fichier de configuration CRACO et ajoutons Tailwind CSS en tant que plugin postcss.

Tailwind CSS propose de nombreuses options de configuration lors de sa configuration, donc si vous souhaitez en savoir plus, consultez la documentation officielle .

Nous devons maintenant configurer notre base de référence CSS. Étant donné que Tailwind CSS utilise plusieurs classes avec des valeurs relatives, il est important de configurer la même base de style CSS dans tous les navigateurs. Tailwind CSS est livré avec un style par défaut pour faire exactement cela.

Créez un fichier CSS que vous pouvez inclure dans votre composant racine et ajoutez le code suivant:

Notez que l’importation de ces classes fera que tous vos éléments par défaut se comportent différemment de ce que vous attendez, donc les éléments tels que les en-têtes et les paragraphes auront les mêmes propriétés de style jusqu’à ce que vous leur ajoutiez des classes CSS Tailwind.

Enfin, utilisez les classes CSS Tailwind dans votre projet. Une fois votre configuration prête, vous pouvez désormais utiliser les classes CSS directement sur votre projet. Allez-y et créez un composant ToDo en utilisant Tailwind CSS:

Notez que ces classes sont directement injectées sous forme de texte dans l’ classNameaccessoire et qu'il existe une référence complète à tous les noms de classe avec des états et des attributs réactifs qui peuvent être utilisés. Bien que cela puisse sembler contre-intuitif au début, une fois que vous travaillez avec Tailwind CSS pendant quelques jours, il y a de fortes chances que vous l'aimiez.

Conclusion

Donc, nous avons vu quatre façons de styliser un composant React. En règle générale, toutes les méthodes sont utiles et en fonction de la taille du projet, vous pouvez utiliser celle-ci.

J’espère que vous avez appris une chose ou deux durant votre lecture.

The Nothing 🔺