Comment styliser les composants React avec CSS

Vous pouvez styliser vos applications et pages React en utilisant un certain nombre de techniques. Le plus simple serait de télécharger une bibliothèque de composants React. Cependant, même lorsque vous utilisez des bibliothèques, vous devrez tôt ou tard ajouter des styles personnalisés. Alors, quelle est la meilleure façon de le faire ?

Pour les projets à petite échelle, vous pouvez facilement styliser votre application à l'aide de styles Inline , de modules ou en écrivant vous-même les spécifications de className . Et pour les projets dynamiques, comme les applications, il est préférable d'utiliser une bibliothèque qui vous permet d'implémenter facilement des accessoires.

Alternativement, vous pouvez utiliser un kit utilitaire comme Tailwind UI, qui est livré avec des styles prédéfinis. Si vous avez besoin de rendre une maquette ou une présentation, les kits d'interface utilisateur compatibles avec React sont la solution.

Style pratique avec className

Dans React, des styles CSS pratiques sont appliqués via la propriété className .

C'est aussi l'équivalent d'utiliser une feuille de style pour votre projet. Étant donné que React est piloté par la structure des composants, vous pouvez importer vos feuilles de style uniquement pour des besoins spécifiques.

Prenons un exemple.

App.css

 .CSS-span { display: inline-block; transform: rotate(-1deg); position: relative; color: #fff; background-color: #dd9662; padding: 1px 5px 1px 5px; border-radius: 5px; }

App.js

 import './app.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> How to Style React Components with <span className="CSS-span">CSS</span> </p> </header> </div> ); }

Et voici le résultat :

C'est une technique de vanille tout à fait valable. Et, est le plus souvent utilisé pour déclarer des variables globales que vous réutiliserez dans les composants principaux.

La seule mise en garde est qu'à mesure que votre projet se développe, le potentiel de conflits de noms augmente également.

De même, le coût d'efficacité de la gestion de centaines de feuilles de style est absurdement élevé.

Utilisation de JSX pour les styles en ligne

React vous permet de styliser les éléments DOM à l'aide de styles en ligne. Bien que la logique CSS reste la même, le style lui-même doit passer par JavaScript. Ceci est également connu sous le nom de JSX.

Regardons un exemple :

Headline.js

 function Headline(){ const headlineStyle = { backgroundColor: "#fff", lineHeight: "1.5", height: "2rem", border: "none", color: "black" } return ( <div style= { headlineStyle } > <h2>Headline title</h2> <p>the sub-headline</p> </div> ) }

Une chose que vous remarquerez est qu'au lieu d'écrire line-height nous utilisons lineHeight .

L'explication à cela est la suivante : "Étant donné que JSX est plus proche de JavaScript que de HTML, React DOM utilise la convention de dénomination des propriétés camelCase au lieu des noms d'attributs HTML." .

Les styles en ligne sont généralement utilisés pour présenter des exemples, mais également pour ajouter un style dynamique à des éléments spécifiques. De plus, les styles en ligne ne prennent pas en charge les pseudo-éléments ou les requêtes multimédias, car vous ne pouvez transmettre que style . L'utilisation d'une feuille de style est une meilleure alternative.

Créer une portée locale avec des modules CSS

Si vous souhaitez appliquer des styles personnalisés aux composants sans nommer les collisions, vous pouvez le faire via les modules CSS.

Il s'agit d'une approche dans laquelle vous pouvez appliquer une portée locale à chaque composant individuellement.

Ainsi:

En-tête.module.css

 .container { width: 1280px; margin: 1rem auto; padding: 1rem; } .header { background-color: #ffffff; color: #000000; font-weight: 700; }

En-tête.js

 import styles from './Header.module.css'; function Header() { return ( <div className={styles.container}> <h2 className={styles.header}>Using CSS Modules in React</h2> </div> ); }

Vous pouvez également faire des choses comme composition , où vous appelez un style spécifique à partir d'une autre feuille de style - évitant ainsi d'avoir à réécrire deux fois la même logique.

 .header { composes: header from './style.css'; }

CSS en JS

Contrairement aux frameworks comme Vue et Svelte, React ne fournit pas sa propre interface de style.

Ainsi, bien que vous puissiez écrire du CSS pour les composants en utilisant les méthodes susmentionnées, l'approche du Saint Graal consiste à utiliser le CSS dans les bibliothèques JS. Chaque bibliothèque a ses forces et ses faiblesses, mais généralement, les avantages restent les mêmes :

• Accessoires pour diverses variations de style.
• Thématisation accessible.
• Portée de style basée sur les composants.
• Variables CSS dynamiques utilisant des fonctions JavaScript.

La solution la plus populaire pour CSS dans JS est Styled Components.

Et d'autres choix notables incluent Emotion et Linaria. Pour les besoins de la démonstration, regardons comment CSS est intégré dans un composant React à l'aide de la bibliothèque Styled Components.

StyledComponents.js

 import styled from 'styled-components'; const HeaderWrapper = styled.section` padding: 4em; background: orange; `; const HeaderTitle = styled.h2` font-size: 2rem; text-align: center; color: black; `; <HeaderWrapper> <HeaderTitle>Example of creating a React component with Styled Components.</HeaderTitle> </HeaderWrapper>

Tout d'abord, nous créons un nouveau composant appelé HeaderWrapper qui affichera un conteneur <section> pour notre titre d'en-tête. Ensuite, nous créons un autre composant appelé HeaderTitle et lui transmettons les variables CSS. Donc, d'une certaine manière, c'est exactement la même chose que de travailler avec des composants Web, uniquement dans le contexte de React.

Utilisation d'un framework CSS

Ce n'est pas que tout dans le front-end évolue vers les frameworks et les bibliothèques.

C'est plus lié au fait que démarrer un projet à partir de rien est inefficace. Un framework comme Tailwind CSS aide à réduire le besoin d'écrire toutes vos structures d'application à partir de zéro. La façon dont Tailwind CSS fonctionne est que le framework fournit des classes utilitaires qui sont prédéterminées, vous permettant de structurer une mise en page sans avoir besoin d'écrire du CSS indépendant.

TailwindCSSApp.js

 function Header() { return ( <div className="container mx-auto bg-gray-500 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-black-700 font-bold mb-5"> Tailwind CSS with React </p> <p className="text-black-300 text-lg"> All styling defined with utility classes </p> </div> ); } export default Header;

Ainsi, plutôt que de définir le style du composant à l'aide de Constants , nous pouvons directement écrire le style spécifié par le framework. Une méthode comme celle-ci est extrêmement efficace et vous pouvez, par exemple, importer des composants d'interface utilisateur (tels que des cartes) créés par d'autres.

Tailwind CSS est particulièrement populaire car vous pouvez directement copier et coller des extraits de code et les utiliser dans la conception de votre application sans aucune conséquence.

Utilisation d'une bibliothèque d'interface utilisateur

La dernière méthode pour styliser les composants React consiste à utiliser une bibliothèque d'interface utilisateur. Contrairement à un framework, une bibliothèque d'interface utilisateur suit des directives de style. Donc, à bien des égards, il s'accompagne d'un style déjà prédéterminé. Les goûts de Mantine et Material UI sont quelques-uns des choix incontournables.

Le seul "inconvénient" est que vous devez passer une bonne partie de votre temps à apprendre cette bibliothèque particulière. Mais on pourrait en dire autant des frameworks. Malgré la barrière à l'entrée, les frameworks CSS et les bibliothèques d'interface utilisateur sont la référence en matière de style des composants React.