Avec 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 grand projet. Avec les composants stylisés, il est facile de trouver le style d’un composant particulier car il se trouve dans le même fichier que le composant.
Voyons comment configurer et intégrer des composants stylisés dans votre application React.
Installation de la bibliothèque styled-components
Vous pouvez installer styled-components en exécutant cette commande dans votre terminal :
npm i styled-components
Pour installer styled-components en utilisant yarn, exécutez :
yarn add styled-components
Création d’un composant stylé
Un composant stylé est tout comme un composant React standard, avec des styles. Il existe plusieurs avantages et inconvénients des composants stylisés, qu’il est important de prendre en compte pour une utilisation correcte.
La syntaxe générale ressemble à ceci :
import styled from "styled-components";
const ComponentName = styled.DOMElementTag`
cssProperty: cssValue
`
Ici, vous importez stylé de la Composant stylé bibliothèque. Le site stylé est une méthode interne qui convertit le code JavaScript en véritable CSS. Le site Nom du composant est le nom du composant stylé. Le site DOMElementTag est l’élément HTML/JSX que vous souhaitez styliser, tel que div, span, bouton, 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 bouton.
Comme ceci :
import React from "react";
function Button() {
return (
<button>Welcome!!!</button>
)
}
Vous pouvez maintenant créer un style pour le bouton à l’aide de styled-components :
import styled from "styled-components";
const StyledButton = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
` Pour mettre tout cela en commun, vous devez remplacer le fichier bouton avec l’étiquette StyledButton composant :
import styled from "styled-components";
import React from "react";
const StyledButton = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
`
function Button() {
return (
<StyledButton>Welcome!!!</StyledButton>
)
}
Styles d’imbrication
Vous pouvez également imbriquer des styles lorsque vous travaillez avec des composants stylisés. L’imbrication des composants stylisés est un peu comme l’utilisation du langage d’extension SASS/SCSS. Vous pouvez imbriquer des styles si un composant contient plusieurs balises d’éléments et que vous souhaitez donner un style à chaque balise individuellement.
Par exemple :
import React from 'react';
function App() {
return (
<div>
<h1>Styled Components</h1>
<p>Welcome to styled-components</p>
</div>
)
}
Ce code crée un composant contenant un h1 élément et a p élément.
Vous pouvez donner un style à ces éléments en utilisant la fonction de style imbriqué des composants stylisés :
import React from 'react';
import styled from 'styled-components';
const StyledApp = styled.div`
color: #333333;
text-align: center;
h1 {
font-size: 32px;
font-style: italic;
font-weight: bold;
letter-spacing: 1.2rem;
text-transform: uppercase;
}
p {
margin-block-start: 1rem;
font-size: 18px;
}
`
function App() {
return (
<StyledApp>
<h1>Styled Components</h1>
<p>Welcome to styled-components</p>
</StyledApp>
)
}
Ce code utilise un composant stylé et imbrique le style de l’élément h1 et p tags.
Création et utilisation de variables
La possibilité de créer des variables est une caractéristique remarquable de la bibliothèque styled-components. Cette possibilité permet de créer un style dynamique en utilisant des variables JavaScript pour déterminer les styles.
Pour utiliser les variables dans les composants stylisés, 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 :
import styled from "styled-components";
const MainColor = "red";
const Heading = styled.h1`
color: ${MainColor};
`;
function App() {
return (
<>
<Heading>Hello World!</Heading>
</>
);
}
Dans le bloc de code ci-dessus, le texte « Hello World !« s’affichera en couleur rouge.
Notez que cet exemple utilise simplement une variable JavaScript standard dans un modèle littéral en conjonction avec le composant stylé. Il s’agit d’une approche différente de l’utilisation des variables CSS.
Extension des styles
Après avoir créé un composant stylé, vous allez utiliser ce composant. Il se peut que vous souhaitiez 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, il suffit d’envelopper le composant stylé dans la balise styled() puis d’inclure tout style supplémentaire.
Dans cet exemple, le PrimaryButton hérite du style du composant Bouton et ajoute une couleur d’arrière-plan différente, le bleu.
import styled from "styled-components";
import React from "react";
const Button = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
`
const PrimaryButton = styled(Button)`
background-color: blue;
`
function App() {
return (
<Button>Welcome</Button>
<PrimaryButton>Hello There!</PrimaryButton>
)
}
Vous pouvez également modifier la balise de rendu d’un composant stylé à l’aide de la fonction comme un accessoire.
Le site comme prop vous permet de spécifier l’élément HTML/JSX sous-jacent sous lequel le composant stylé sera rendu.
Par exemple :
import styled from "styled-components";
import React from "react";
const Button = styled.button`
padding: 1rem 0.8rem;
border-radius: 15px;
background-color: gray;
color: #FFFFFF;
font-size: 15px;
`
function App() {
return (
<Button as='a' href='#'>Welcome</Button>
)
}
Ce code rend le Bouton comme composant a en fixant son href à l’attribut ‘#’.
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 donner du style à l’application en utilisant le style global.
Styled-Components offre une createGlobalStyle qui vous permet de déclarer des styles de manière globale. L’adresse createGlobalStyle supprime la contrainte du style propre à chaque composant et vous permet de déclarer des styles qui s’appliquent à tous les composants.
Pour créer des styles globaux, il faut importer le fichier createGlobalStyle et déclarez les styles dont vous avez besoin.
Par exemple :
import {createGlobalStyle} from 'styled-components';
const GlobalStyles = createGlobalStyle`
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #343434;
font-size: 15px;
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
}
`
export default GlobalStyles;
Ensuite, vous importez le fichier GlobalStyles dans votre composant d’application et effectuez le rendu. Le rendu du GlobalStyles dans votre composant d’application appliquera les styles à votre application.
Comme ça :
import React from 'react';
import GlobalStyles from './Global';
function App() {
return (
<div>
<GlobalStyles />
</div>
)
}
Plus vers Composants stylisés
Vous avez appris à configurer, installer et utiliser les composants stylisés dans votre application React. La bibliothèque styled-components est un moyen efficace de styliser votre application React. Elle fournit de nombreuses fonctionnalités utiles qui permettent une flexibilité dans le stylisme et un stylisme dynamique.
Les composants stylisés ne s’arrêtent pas là, comme les animations, et React est un grand framework qui a encore beaucoup à apprendre.
