Travailler avec les styles CSS dans l'attribut style dans React

Dans les leçons précédentes, dans l'attribut style nous avons passé une variable contenant un objet avec des styles CSS. Il est possible de ne pas utiliser de variable intermédiaire et de décrire l'objet directement dans l'attribut - dans ce cas, nous avons besoin de deux paires d'accolades - la première pour l'insertion JSX et la seconde - pour l'objet.

Ainsi, prenons notre composant sans styles CSS :

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

Par exemple, définissons directement les propriétés CSS pour le premier paragraphe de notre composant React App :

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	text
</p>

Ajoutons de manière similaire les styles pour les autres balises.

En conséquence, le code du composant ressemblera à ce qui suit :

function App() {
	return (
		<div style = {{
			width: '200px',
			border: '2px solid brown',
			padding: '10px',
			textAlign: 'center' }}>
			<p style={{
				color: 'orangered',
				fontWeight: 'bold' }}>
				text
			</p>
			<p style = {{
				fontStyle: 'brown',
				color: 'brown' }}>
				text
			</p>
			<p style = {{
				backgroundColor: 'orange',
				fontWeight: 'bold',
				color: 'white' }}>
				text
			</p>
		</div>
	);
}

Prenez le composant React que vous avez réalisé dans l'exercice de la leçon précédente. Ajoutez les styles à chaque balise directement dans l'attribut style, comme montré dans cette leçon.