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.
Cette méthode reflète les liens CSS traditionnels.
style.css
).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
.
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.
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.
.module.css
(par exemple, styles.module.css
).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;
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;
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é.)
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!