Stylisation avec Styled Components dans React

Dans les leçons précédentes, nous avons examiné les techniques de stylisation utilisant le CSS global et la stylisation en ligne. Dans cette leçon, nous travaillerons avec une approche plus efficace pour les grandes applications - l'utilisation de la bibliothèque styled-components.

Alors, prenons notre composant sans styles CSS, que nous avons utilisé dans les leçons précédentes :

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Pour commencer, installons la bibliothèque Styled Components :

npm install --save styled-components

Ensuite, importons le package nécessaire dans le composant App :

import styled from 'styled-components';

Maintenant, nous pouvons encapsuler les balises dans des styles et les utiliser comme des composants React, mais déjà avec des styles attachés directement dans le JS. Cette approche est également appelée CSS dans JS.

Stylisons le premier paragraphe. Pour cela, avant la fonction App après les lignes d'import créons un composant Text1. Dans l'objet styled de la bibliothèque, nous avons besoin d'un paragraphe, donc nous écrivons styled.p. Ensuite, dans la chaîne de modèle, énumérons les styles CSS nécessaires - comme en CSS normal :

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

Comme vous pouvez le voir, nous utilisons ici du CSS pur sous forme de chaînes de modèle, ce qui est très pratique. De manière similaire, nous pouvons utiliser des media queries, des pseudo-éléments, des sélecteurs et d'autres fonctionnalités CSS.

Maintenant, à l'intérieur de la fonction du composant App remplaçons la balise p par le composant que nous avons créé Text1 avec les styles CSS :

<Text1>text</Text1>

Stylisons de manière similaire les deuxième et troisième paragraphes. Pour cela créons les composants Text2 et Text3 :

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

Et, enfin, stylisons notre div. Pour cela, créons un composant et appelons-le Container :

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

Remplaçons toutes nos balises par les composants créés :

import styled from "styled-components";

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

function App() {
	return (
		<Container>
			<Text1>text</Text1>
			<Text2>text</Text2>
			<Text3>text</Text3>
		</Container>
	);
}

Grâce à cette approche, on peut créer des composants réutilisables avec des styles.

Si vous ouvrez le code généré dans le panneau du développeur dans le navigateur, vous verrez que chaque composant a ses propres classes uniques générées. Ainsi, nous n'avons plus à nous soucier des conflits entre les classes des composants individuels.

De manière similaire, on peut styliser des composants, en utilisant, par exemple, la bibliothèque Emotion.

Prenez le composant React que vous avez fait dans la tâche de la leçon précédente, stylisez-le en utilisant la bibliothèque Styled Components.