2.11.4 - Styled components

A - Qu'est-ce que Styled components ?

Styled components est une bibliothèque de CSS en JavaScript qui permet de créer du style en appliquant une logique de composants. Les template strings utilisées écrites entre `` permettent d'utiliser des variables et de passer des règles css.

Si la syntaxe du CSS en React vous plaisait alors Styled components devrait vous plaire !

Exemple sans Styled components avec le composant User :

// CSS en React
type stylesType = {
	[key: string]: React.CSSProperties
}

const styles: stylesType = {
	squareList: {
		listStyleType: "square",
	},
	important: {
		fontWeight: "bold",
	},
}

// Nos composants intègrent le style dans le code
render() {
	<ul style={styles.squareList}>
		{users.map(({id, name, age}) => {
			return (
				<li key={id}>
					<span style={styles.important}>Nom :</span> {name}
					<span style={styles.important}>Âge :</span> {age}
				</li>
			)
		})}
	</ul>,
}

Avec Styled components :

// avec styled-components

const SquareList = styled.ul`
	list-style-type: square;
`

const Important = styled.span`
	font-weight: bold;
`

// les composants sont pré-stylisés
render() {
	return (
		<SquareList>
			{users.map(({id, name, age}) => {
				return (
					<li key={id}>
						<Important>Nom :</Important> {name}
						<Important>Âge :</Important> {age}
					</li>
				)
			})}
		</SquareList>
	)
}

B - Installation de Styled components

Pour installer Styled components, il faut dans un premier temps ajouter le paquet correspondant à notre projet en tant que dépendance puis installer le paquet qui contient les types de celui-ci en tant que dépendance de développement puisque nous utilisons TypeScript.

# Avec npm
$ npm install styled-components
$ npm install -D @types/styled-components

# Avec yarn
$ yarn add styled-components
$ yarn add @types/styled-components -D

C - Utilisation de Styled components

Pour utiliser Styled components après l'avoir installé et commencer à créer des composants stylisés il suffit d'importer "styled" de la librairie "styled-components" dans les composants :

import styled from 'styled-components'

"styled" est l'objet qui va vous permettre de réaliser du JSX stylisé et ensuite de les utiliser tels que des composants. Pour styliser une balise il suffit de déclarer une constante qui correspondra à l'objet styled qui intègre les différents types de balises et ensuite d'utiliser une template string (``) qui contiendra notre style.

Par exemple pour styliser une div :

const StyledDiv = styled.div`
	background-color: blue;
	padding: 1rem;
`

Nous utiliserons ensuite "StyledDiv" dans notre JSX de la même manière que l'on utiliserait un composant au lieu d'utiliser une div sur laquelle on appliquerait un style.

render() {
	<StyledDiv>
		Je suis une div stylisé avec un fond bleu et un padding de 1 rem
	</StyledDiv>
}

Astuce

Pour avoir la coloration syntaxique entre les templates string afin d'avoir une meilleure visibilité, il vous faudra sous VS Code installer l'extension "vscode-styled-components" de Styled components.