Réagir des composants avec plusieurs styles et meilleures pratiques

Le choix de la bonne méthode de style de composant React n'est pas statique, mais dépend du cas d'utilisation spécifique, des préférences personnelles et des objectifs architecturaux. Cet article discutera de plusieurs méthodes de style de composants React couramment utilisées, analysera leurs avantages et leurs inconvénients, et recommandera finalement la meilleure solution.

cible:

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

Méthode de style:

• en ligne CSS
• CSS normal
• CSS dans la bibliothèque JS
• module CSS
• sass & scss
• moins
• stylable

en ligne CSS

• Dépendances: aucun
• Difficulté: simple
• Revue: pire

CSS en ligne écrit des styles directement aux éléments HTML ou JSX. Bien que facile à mettre en ?uvre, il a une mauvaise réutilisabilité et une évolutivité.

Exemple:

import React from "react";

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

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

CSS normal

• Dépendances: aucun
• Difficulté: simple
• évaluation: toujours ok

CSS ordinaire est une approche simple et simple, meilleure que CSS en ligne, où les styles peuvent être multiplexés par plusieurs pages et éléments. Mais dans les grands projets, il n'y a pas de guide de style unifié, ce qui peut entra?ner des difficultés de maintenance.

Exemple:

/* styles.css */

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 = () => (
  >
    ? 2020
    <a> href="http://m.miracleart.cn/link/6b41fd33b36a1ce27fc0a3b8f9d8df4c"></a>Find me on Twitter>
  >
);

export default Footer;

CSS dans JS

CSS dans JS Technology utilise JavaScript pour styliser, générer CSS et l'ajouter au DOM. Il a une portée de style et une fonctionnalité de style dynamique, mais introduit des dépendances.

jss

• Dépendances: react-jss
• Difficulté: simple
• Revue: pas mal

JSS permet d'écrire de manière déclarative des styles à l'aide de JavaScript.

Exemple: (omis, l'exemple d'origine est plus long)

composants stylisés

• Dépendances: composants stylisés
• Difficulté: moyen
• Revue: pas mal

Les composants stylisés utilisent des littéraux de modèle de balise pour styliser et créer des composants de réaction normaux.

Exemple: (omis, l'exemple d'origine est plus long)

module CSS

• Dépendances: CSS-chargedeur
• Difficulté: difficulté (nécessite une configuration de chargeur)
• Revue: bon

Le module CSS évite les problèmes globaux de portée en générant des noms de classe uniques, mais la configuration est relativement compliquée.

Exemple: (omis, l'exemple d'origine est plus long)

sass & scss

• Dépendances: Node-Sass
• Difficulté: simple
• Revue: Best

SASS est un puissant préprocesseur CSS avec des caractéristiques telles que des variables, des règles imbriquées et des mixins, améliorant la maintenabilité et l'évolutivité des styles.

Exemple: (omis, l'exemple d'origine est plus long)

moins

• Dépendances: moins, moins de chargeur
• Difficulté: simple
• évaluation: bon

moins est similaire à SASS, mais a une syntaxe légèrement différente.

Exemple: (omis, l'exemple d'origine est plus long)

stylable

• Dépendances: stylable, @ stylable / webpack-plagin
• Difficulté: difficulté
• Revue: bon

stylable est également un préprocesseur qui peut étendre les styles de composants et a des fonctions telles que des pseudo-classes personnalisées.

Exemple: (omis, l'exemple d'origine est plus long)

Pratique et comparaison

L'auteur a essayé une variété de méthodes et a finalement pensé que SCSS était le meilleur choix.

Avantages de SCSS:

• Semblable à la syntaxe CSS, il est facile à apprendre.
• prend en charge des fonctions telles que les variables, la nidification, le mixin et les fonctions pour améliorer la maintenabilité et la réutilisabilité du code.
• Créer des supports React App Out of the Box.

Exemple d'utilisation de SCSS: (omis, l'exemple d'origine est plus long)

Résumé

Cet article compare une variété de méthodes de style de composant React et recommande SCSS comme la meilleure solution. En tant que préprocesseur CSS, SCSS fournit de nombreuses fonctionnalités puissantes qui peuvent améliorer considérablement l'efficacité du développement et la qualité du code.

FAQ: (omis, le texte d'origine contient une FAQ détaillée)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!