Insertion de données dans l'attribut style à partir d'un objet en React

Les styles CSS peuvent également être ajoutés aux éléments en utilisant l'attribut style. Dans cette leçon et dans les quelques suivantes, nous examinerons les méthodes de stylisation en ligne.

Maintenant, nous ne connecterons pas le fichier styles.css, mais nous transmettrons les valeurs correspondantes à l'attribut style sous la forme d'un objet contenant les styles pour chaque balise, que nous écrirons directement dans le fichier du composant.

Prenons donc notre composant sans styles CSS, que nous avons créé dans la leçon précédente :

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

Dans le fichier App.js, avant la commande return, créons un objet contenant les styles CSS pour la div dans la variable class1. Rappelez-vous que les noms des propriétés ici s'écrivent en notation camelCase, et les valeurs des propriétés doivent être mises entre guillemets :

const class1 = {
	width: '200px',
	border: '2px solid brown',
	padding: '10px',
	textAlign: 'center'
};

Maintenant, ajoutons l'objet class2 avec les styles pour le premier paragraphe :

const class2 = {
	color: 'orangered',
	fontWeight: 'bold'
}

L'objet class3 avec les styles pour le deuxième paragraphe :

const class3 = {
	fontStyle: 'italic',
	color: 'brown',
}

Et enfin, class4 pour le dernier :

const class4 = {
	backgroundColor: 'orange',
	fontWeight: 'bold',
	color: 'white',
}

Maintenant, pour appliquer dans le composant les classes CSS, utilisons l'attribut style. Pour le premier paragraphe nous avions la variable class2, transmettons-la comme valeur :

<p style={class2}>text</p>

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

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

function App() {
	const class1 = {
		width: '200px',
		border: '2px solid brown',
		padding: '10px',
		textAlign: 'center',
	};

	const class2 = {
		color: 'orangered',
		fontWeight: 'bold',
	};

	const class3 = {
		fontStyle: 'italic',
		color: 'brown',
	};

	const class4 = {
		backgroundColor: 'orange',
		fontWeight: 'bold',
		color: 'white',
	};

	return (
		<div style={class1}>
			<p style={class2}>text</p>
			<p style={class3}>text</p>
			<p style={class4}>text</p>
		</div>
	);
}

Prenez le composant React que vous avez créé dans l'exercice de la leçon précédente, créez des objets avec les styles CSS pour vos balises, et insérez-les dans les attributs style correspondants.