Catégories
Astuces et Design

Composants Style React: comparaison de 7 façons

J'ai travaillé avec quelques développeurs de mon bureau sur des projets React, qui ont des niveaux d'expérience différents dans React. Cet article est né d'une question posée par l'un d'eux sur la meilleure façon de styliser les composants React.

Il existe plusieurs façons de styliser les composants React. Choisir la bonne méthode pour styliser les composants n’est pas un absolu parfait. C'est une décision spécifique qui doit servir votre cas d'utilisation particulier, vos préférences personnelles et, par-dessus tout, les objectifs architecturaux de votre façon de travailler. Par exemple, j'utilise les notifications dans React JS en utilisant Noty, et le style devrait également pouvoir gérer les plugins.

Certains de mes objectifs en répondant à la question incluaient les suivants:

  • espace de noms global
  • dépendances
  • réutilisabilité
  • évolutivité
  • élimination du code mort

Il semble y avoir un certain nombre de façons de styliser les composants React largement utilisés dans l'industrie pour le travail au niveau de la production:

  • CSS en ligne
  • CSS normal
  • CSS dans les bibliothèques JS
  • Modules CSS
  • Sass et SCSS
  • Moins
  • Stylable

Pour chaque méthode, je vais examiner le besoin de dépendances, le niveau de difficulté et si l’approche est vraiment bonne ou non.

CSS en ligne

  • Dépendances: Aucun
  • Difficulté: Facile
  • Approche: Pire

Je ne pense pas que quiconque ait besoin d'une introduction au CSS en ligne. Il s'agit du style CSS envoyé à l'élément directement à l'aide du HTML ou du JSX. Vous pouvez inclure un objet JavaScript pour CSS dans les composants React, bien qu'il existe quelques restrictions telles que la casse camel des noms de propriété contenant un trait d'union. Vous pouvez styliser les composants React de deux manières à l'aide d'objets JavaScript, comme indiqué dans l'exemple.

Exemple

import React from "react";

const spanStyles = {
  color: "#fff",
  borderColor: "#00f"
};

const Button = props => (
  <button style={{
    color: "#fff",
    borderColor: "#00f"
  }}>
    <span style={spanStyles}>Button Namespan>
  button>
);

CSS régulier

  • Dépendances: Aucun
  • Difficulté: Facile
  • Approche: d'accord

Le CSS régulier est une approche courante, sans doute une étape meilleure que le CSS en ligne. Les styles peuvent être importés dans n'importe quel nombre de pages et d'éléments contrairement au CSS en ligne, qui est appliqué directement à l'élément particulier. Le CSS normal présente plusieurs avantages, tels que la prise en charge native du navigateur (il ne nécessite aucune dépendance), aucun outil supplémentaire à apprendre et aucun risque de verrouillage du fournisseur.

Vous pouvez gérer un nombre illimité de feuilles de style et il peut être plus facile de modifier ou de personnaliser les styles si nécessaire. Mais le CSS régulier peut être un problème majeur si vous travaillez sur un projet plus important avec beaucoup de personnes impliquées, en particulier sans un guide de style convenu pour l'écriture de CSS.

Exemple



a:link {
  color: gray;
}
a:visited {
  color: green;
}
a:hover {
  color: rebeccapurple;
}
a:active {
  color: teal;
}
import React from "react";
import "styles.css";

const Footer = () => (
  <footer>
    © 2020
    <a href="https://twitter.com/praveenscience">Find me on Twittera>
  footer>
);

export default Footer;

Plus d'information

Vous pouvez en savoir plus sur l’utilisation régulière du CSS sur la page Learning CSS du W3C. Il existe de nombreux terrains de jeux – tels que JS Bin, JSFiddle, CodePen et Repl.it – ​​où vous pouvez l'essayer en direct et obtenir les résultats en temps réel.

CSS-en-JS

CSS-in-JS est une technique qui vous permet d'utiliser JavaScript pour styliser les composants. Lorsque ce JavaScript est analysé, le CSS est généré (généralement sous la forme d'un