Gegevens invoegen in het style attribuut vanuit een apart bestand in React

We hoeven de objecten met stijlen niet in het componentbestand te schrijven, zoals in de vorige les, maar we kunnen een apart bestand maken met onze stijlobjecten en deze importeren in het gewenste component.

Laten we ons component zonder CSS-stijlen nemen:

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

Laten we in de map src een apart bestand styles.js maken, waarin we onze objecten met stijlen opschrijven:

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

Vergeet niet onderaan het bestand styles.js onze objecten te exporteren als één object styles:

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

Laten we nu het object styles in ons component importeren:

import { styles } from "./styles";

Nu kunnen we het gewenste object met CSS-stijlen uit het algemene object styles op onze tags toepassen. Laten we op de eerste alinea de stijlen uit het object class2 toepassen:

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

Op een vergelijkbare manier voegen we stijlen uit de objecten toe aan de overige tags.

Uiteindelijk ziet de code van het component er als volgt uit:

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>
	);
}

Neem de React-component die je hebt gemaakt in de opdracht van de vorige les. Maak een apart bestand styles.js aan, waarin objecten met CSS-stijlen voor je tags staan, exporteer ze als één object, pas de stijlen toe op je React-component.