En utilisant React, il est courant d'enregistrer vos styles dans un fichier CSS global. Cela peut rendre difficile la localisation du style de composants spécifiques, en particulier lorsque vous travaillez sur un projet de grande envergure. Avec les composants stylés, il est facile de trouver le style d'un composant particulier car ils se trouvent dans le même fichier que le composant.
Voyons comment configurer et intégrer des composants stylés dans votre application React.
Installation de la bibliothèque styled-components
Vous pouvez installer des composants de style en exécutant cette commande dans votre terminal :
npm i composants de style
Pour installer des composants stylés à l'aide de fil, exécutez :
fil ajouter des composants de style
Création d'un composant stylé
Un composant stylé est comme un composant React standard, avec des styles. Il y a plusieurs
avantages et inconvénients des composants stylés, qu'il est important de prendre en compte pour une utilisation correcte.La syntaxe générale ressemble à ceci :
importer stylé depuis"composants stylés";
constante ComponentName = stylé. DOMElementTag`
cssProperty: cssValue
`
Ici vous importez stylé du composant de style bibliothèque. Le stylé La fonction est une méthode interne qui convertit le code JavaScript en CSS réel. Le Nom du composant est le nom du composant stylé. Le DOMElementTag est l'élément HTML/JSX que vous avez l'intention de styliser, tel que div, span, button, etc.
Pour créer un bouton stylé à l'aide d'un composant stylé, vous devez d'abord créer un composant React contenant un élément de bouton.
Ainsi:
importer Réagir depuis"réagir";
fonctionBouton() {
retour (
Vous pouvez maintenant créer un style pour le bouton à l'aide de styled-components :
importer stylé depuis"composants stylés";
constante StyledButton = styled.bouton`
rembourrage: 1rem 0.8rem;
border-radius: 15px ;
couleur de fond: gris ;
couleur: #FFFFFF ;
taille de police: 15px ;
`
En mettant tout ensemble, vous devrez remplacer le bouton étiquette avec le StyleBouton composant:
importer stylé depuis"composants stylés";
importer Réagir depuis"réagir";constante StyledButton = styled.bouton`
rembourrage: 1rem 0.8rem;
border-radius: 15px ;
couleur de fond: gris ;
couleur: #FFFFFF ;
taille de police: 15px ;
`
fonctionBouton() {
retour (Bienvenue !!!</StyledButton>
)
}
Styles d'imbrication
Vous pouvez également imbriquer des styles lorsque vous travaillez avec des composants stylés. L'imbrication de composants de style est un peu comme en utilisant le langage d'extension SASS/SCSS. Vous pouvez imbriquer des styles si un composant contient plusieurs balises d'élément et souhaite styliser chaque balise individuellement.
Par exemple:
importer Réagir depuis'réagir';
fonctionApplication() {
retour (Composants stylés</h1>
Bienvenue dans les composants stylés</p>
</div>
)
}
Ce code crée un composant contenant un h1 élément et un p élément.
Vous pouvez styliser ces éléments à l'aide de la fonctionnalité de style imbriqué des composants stylisés :
importer Réagir depuis'réagir';
importer stylé depuis'composants stylés';constante StyledApp = styled.div`
couleur: #333333;
aligner le texte: centrer ;h1 {
taille de police: 32px ;
style de police: italique ;
font-weight: gras ;
l'espacement des lettres: 1.2rem;
transformation de texte: majuscule;
}p {
marge-bloc-début: 1rem;
taille de police: 18px ;
}
`
fonctionApplication() {
retour (Composants stylés</h1>
Bienvenue dans les composants stylés</p>
</StyledApp>
)
}
Ce code utilise un composant stylisé et imbrique le style pour le h1 et p Mots clés.
Créer et utiliser des variables
La possibilité de créer des variables est une caractéristique remarquable de la bibliothèque de composants de style. Cette capacité accorde un style dynamique où vous pouvez utiliser des variables JavaScript pour déterminer les styles.
Pour utiliser des variables dans des composants de style, créez une variable et attribuez-lui une valeur de propriété CSS. Vous pouvez ensuite utiliser cette variable directement dans votre CSS, par exemple :
importer stylé depuis"composants stylés";constante Couleur principale = "rouge";
constante Titre = styled.h1`
couleur: ${MainColor} ;
`;
fonctionApplication() {
retour (
<>Salut le monde !</Heading>
</>
);
}
Dans le bloc de code ci-dessus, le texte "Bonjour le monde!” s'affichera en rouge.
Notez que cet exemple utilise simplement une variable JavaScript standard dans un littéral de modèle en conjonction avec le composant stylisé. C'est une approche différente de utiliser des variables CSS.
Étendre les styles
Après avoir créé un composant stylé, vous utiliserez le composant. Vous voudrez peut-être faire des différences subtiles ou ajouter plus de style dans certaines situations. Dans de tels cas, vous pouvez étendre les styles.
Pour étendre les styles, vous encapsulez le composant stylé dans le stylé() constructeur, puis incluez tous les styles supplémentaires.
Dans cet exemple, le Bouton principal Le composant hérite du style du composant Button et ajoute une couleur de fond bleue différente.
importer stylé depuis"composants stylés";
importer Réagir depuis"réagir";constante Bouton = style.bouton`
rembourrage: 1rem 0.8rem;
border-radius: 15px ;
couleur de fond: gris ;
couleur: #FFFFFF ;
taille de police: 15px ;
`constante PrimaryButton = stylé (Bouton)`
couleur de fond: bleu ;
`
fonctionApplication() {
retour (
Vous pouvez également modifier la balise qu'un composant stylé affiche à l'aide de la commande comme un accessoire.
Le comme prop vous permet de spécifier l'élément HTML/JSX sous-jacent sous lequel le composant stylisé serait rendu.
Par exemple:
importer stylé depuis"composants stylés";
importer Réagir depuis"réagir";constante Bouton = style.bouton`
rembourrage: 1rem 0.8rem;
border-radius: 15px ;
couleur de fond: gris ;
couleur: #FFFFFF ;
taille de police: 15px ;
`
fonctionApplication() {
retour (
Ce code rend le Bouton composant en tant que un élément, en définissant son href attribuer à '#'.
Création de styles globaux
Les composants stylisés sont généralement limités à un composant, vous vous demandez peut-être comment styliser l'application dans son ensemble. Vous pouvez styliser l'application à l'aide du style global.
Styled-Components propose une createGlobalStyle fonction qui vous permet de déclarer des styles globalement. Le createGlobalStyle supprime la contrainte de style de portée de composant et vous permet de déclarer des styles qui s'appliquent à chaque composant.
Pour créer des styles globaux, vous importez le createGlobalStyle fonction et déclarez les styles dont vous avez besoin.
Par exemple:
importer {createGlobalStyle} depuis'composants stylés';constante StylesGlobaux = créerStyleGlobal`
@importer URL(' https://fonts.googleapis.com/css2?family=Montserrat&display=swap');* {
marge: 0;
rembourrage: 0;
dimensionnement de la boîte: border-box ;
}corps {
Couleur de l'arrière plan: #343434;
taille de police: 15px ;
couleur: #FFFFFF ;
famille de polices: 'Montserrat', sans empattement;
}
`
exporterdéfaut StylesGlobaux ;
Ensuite, vous importez le Styles globaux component dans votre composant d'application et affichez-le. Rendre le Styles globaux Le composant de votre composant d'application appliquera les styles à votre application.
Ainsi:
importer Réagir depuis'réagir';
importer Styles globaux depuis'./Mondial';
fonctionApplication() {
retour (
</div>
)
}
En savoir plus sur les composants stylés
Vous avez appris à configurer, installer et utiliser des composants stylés dans votre application React. La bibliothèque de composants de style est un moyen efficace de styliser votre application React. Il fournit de nombreuses fonctionnalités utiles qui permettent une flexibilité dans le style et le style dynamique.
Il y a beaucoup plus de composants stylés, tels que les animations, et React est un grand framework avec beaucoup à apprendre en plus de cela.
