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

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;

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>

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;

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

 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;

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;

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!