Composants de réaction de style: 7 façons comparées-js tutoriel-php.cn

Composants de réaction de style: 7 façons comparées

尊渡假赌尊渡假赌尊渡假赌

Libérer： 2025-02-10 10:17:10

original

397 Les gens l'ont consulté

Réagir des composants avec plusieurs styles et meilleures pratiques

Style React Components: 7 Ways Compared

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>
  >
);

Copier après la connexion

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;
}

Copier après la connexion

import React from "react";
import "styles.css";

const Footer = () => (
  >
    © 2020
    <a> href="//m.sbmmt.com/link/6b41fd33b36a1ce27fc0a3b8f9d8df4c"></a>Find me on Twitter>
  >
);

export default Footer;

Copier après la connexion

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.