Insertion de données dans l'attribut style à partir d'un fichier séparé dans React

Nous pouvons éviter d'écrire les objets de style dans le fichier du composant, comme dans la leçon précédente, et créer un fichier séparé contenant nos objets de style et les importer dans le composant nécessaire.

Alors, prenons notre composant sans styles CSS :

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

Créons dans le dossier src un fichier séparé styles.js, dans lequel nous écrirons nos objets de style :

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',
};

N'oublions pas en bas du fichier styles.js d'exporter nos objets en un seul objet styles :

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

Maintenant, importons l'objet styles dans notre composant :

import { styles } from "./styles";

Maintenant, nous pouvons appliquer l'objet de styles CSS dont nous avons besoin à partir de l'objet global styles à nos balises. Appliquons au premier paragraphe les styles de l'objet class2 :

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

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

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

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

Prenez le composant React que vous avez réalisé dans l'exercice de la leçon précédente. Créez un fichier séparé styles.js, dans lequel se trouveront les objets de styles CSS pour vos balises, exportez-les en un seul objet, appliquez les styles à votre composant React.