Gegevens invoegen in het style attribuut vanuit een object in React

CSS-stijlen kunnen ook aan elementen worden toegevoegd met behulp van het attribuut style. In deze en enkele volgende lessen zullen we methoden voor inline stijlen bekijken.

We zullen nu het bestand styles.css niet aansluiten, maar de bijbehorende waarden doorgeven aan het attribuut style in de vorm van een object met stijlen voor elke tag, die we rechtstreeks in het componentbestand zullen schrijven.

Laten we dus ons component zonder CSS-stijlen nemen, dat we in de vorige les hebben gemaakt:

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

Laten we in het bestand App.js vóór de opdracht return een object met CSS-stijlen voor de div maken in de variabele class1. Onthoud dat de namen van eigenschappen hier worden geschreven in camelCase notatie, en de waarden van eigenschappen moeten tussen aanhalingstekens worden gezet:

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

Laten we nu het object class2 toevoegen met stijlen voor de eerste alinea:

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

Object class3 met stijlen voor de tweede alinea:

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

En tenslotte class4 voor de laatste:

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

Om nu de CSS-stijlen in de component toe te passen, gebruiken we het attribuut style. Voor de eerste alinea hadden we de variabele class2, laten we deze als waarde doorgeven:

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

Op een vergelijkbare manier voegen we stijlen vanuit objecten toe voor de overige tags.

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

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

Neem de React-component die je hebt gemaakt in de opdracht bij de vorige les, maak objecten met CSS-stijlen voor je tags en plaats deze in de overeenkomstige attributen style.