Insertion de données dans l'attribut style à partir de variables dans React

Dans la leçon précédente, nous avons écrit l'objet directement dans l'attribut style. Nous pouvons également utiliser l'insertion de données dans cet objet à partir de variables.

Prenons notre composant React sans styles CSS :

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

Maintenant, nous allons créer des variables et leur assigner des valeurs de propriétés CSS. Commençons dans l'ordre avec les styles pour la div.

Dans le fichier du composant, avant la commande return, créons la variable wd1 et assignons-lui la valeur '200px' :

const wd1 = '200px';

De la même manière, créons des variables pour toutes les valeurs des propriétés de notre div :

const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Maintenant, ajoutons des variables pour le premier paragraphe :

const co1 = 'orangered';
const fw1 = 'bold';

Pour le deuxième paragraphe :

const fs1 = 'italic';
const co2 = 'brown';

Et enfin, pour le dernier. Ici, seules deux variables seront nécessaires, et non trois. Cela n'a pas de sens de se répéter, puisque la valeur bold est déjà disponible pour le premier paragraphe :

const bco1 = 'orange';
const co3 = 'white';

Et maintenant, nous allons substituer les variables avec les valeurs de styles. Faisons-le pour le premier paragraphe. Insérons les variables co1 et fw1 à la place des valeurs dans l'objet :

<p style = {{ color: co1, fontWeight: fw1 }}>
	text
</p>

Nous procéderons de la même manière avec les autres balises.

En conséquence, le code de notre composant ressemblera à ceci :

function App() {

	//pour div :
	const wd1 = '200px';
	const br1 = '2px solid brown';
	const pd1 = '10px';
	const ta1 = 'center';

	//pour le premier p :
	const co1 = 'orangered';
	const fw1 = 'bold';

	//pour le deuxième p :
	const fs1 = 'italic';
	const co2 = 'brown';
	
	//pour le troisième p :
	const bco1 = 'orange';
	const co3 = 'white';

	return (
		<div style = {{
			width: wd1,
			border: br1,
			padding: pd1,
			textAlign: ta1 }}>
			<p style = {{ color: co1, fontWeight: fw1 }}>
				text
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				text
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				text
			</p>
		</div>
	);
}

Modifiez le code de la solution du problème de la leçon précédente de manière à ce que les valeurs des propriétés CSS soient stockées dans des variables.