Maison > interface Web > tutoriel CSS > Différentes façons d'écrire CSS dans la réaction

Différentes façons d'écrire CSS dans la réaction

William Shakespeare
Libérer: 2025-03-13 10:44:09
original
263 Les gens l'ont consulté

Différentes façons d'écrire CSS dans la réaction

Nous savons tous comment lier une feuille de style à un HTML , mais le style dans une application React à une seule page (SPA) offre plus d'options. Explorons les différentes approches du CSS dans React, mettant en évidence leurs forces et leurs faiblesses.

Importation de feuilles de styles externes

Cette méthode reflète les liens CSS traditionnels.

  1. Créez un fichier CSS (par exemple, style.css ).
  2. Écrivez vos règles CSS.
  3. Importez-le dans votre composant React:
 import "./style.css";
Copier après la connexion

Exemple:

 importer réagir à partir de "réagir";
import "./components/css/app.css";

Function App () {
  retour (
    <div classname="main"></div>
  ));
}

Exporter l'application par défaut;
Copier après la connexion

Cela importe App.css à partir du dossier /Components/css .

Styles en ligne

Bien que généralement découragés pour les grands projets en raison de problèmes de maintenabilité, les styles en ligne peuvent être pratiques dans des contextes spécifiques. La structure des composants de React atténue certains problèmes de maintenabilité.

Un exemple simple:

<div classname="main" style="{{" color:></div>
Copier après la connexion

Une approche plus organisée utilise des objets de style:

 importer réagir à partir de "réagir";

Function App () {
  const Styles = {
    principal: {
      BackgroundColor: "# f1f1f1",
      Largeur: "100%",
    },
    inputText: {
      rembourrage: "10px",
      Couleur: "rouge",
    },
  };
  retour (
    <div classname="main" style="{styles.main}"></div>
  ));
}

Exporter l'application par défaut;
Copier après la connexion

Cela applique des styles définis dans l'objet styles . Remarquez l'utilisation des accolades bouclées pour la référence d'objets.

Modules CSS

Les modules CSS offrent des noms de classe portée localement, empêchant les conflits de dénomination dans des applications plus grandes. Chaque composant obtient ses propres noms de classe uniques.

  1. Créez un fichier .module.css (par exemple, styles.module.css ).
  2. Importez-le dans votre composant React.
  3. Utilisez les styles importés avec className :
 / * styles.module.css * /
.font {
  Couleur: # F00;
  taille de police: 20px;
}
Copier après la connexion
 importer réagir à partir de "réagir";
Importez des styles de "./styles.module.css";

Function App () {
  retour (
    <h1 classname="{styles.font}">Bonjour le monde</h1>
  ));
}

Exporter l'application par défaut;
Copier après la connexion

Composants coiffés

Styled-Components fournit un moyen d'écrire des CSS réels dans votre JavaScript, créant des composants réagis de style. Les avantages incluent des noms de classe uniques, un style dynamique et une meilleure organisation CSS.

Installation: npm install styled-components

Importation: import styled from 'styled-components';

Exemple:

 importer réagir à partir de "réagir";
importer stylisé à partir de "composants stylisés";

const wrapper = Styled.div`
  Largeur: 100%;
  hauteur: 100px;
  Color d'arrière-plan: rouge;
  Affichage: bloc;
`;

Function App () {
  retour<wrapper></wrapper> ;
}

Exporter l'application par défaut;
Copier après la connexion

Style conditionnel

Styled-Components permet un style conditionnel à l'aide d'accessoires dans le CSS, permettant des modifications de style dynamique en fonction de l'état du composant ou des accessoires. Cet exemple utilise un opérateur ternaire pour le style conditionnel:

(Exemple de code démontrant le style conditionnel omis pour la concision, mais le concept est expliqué.)

Conclusion

React offre diverses options de style CSS. La meilleure approche dépend de la taille du projet, de la complexité et des préférences personnelles. Cet aperçu fournit une base solide pour choisir la bonne méthode pour vos projets React.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal