Inserarea datelor în atributul style dintr-un obiect în React

Stilurile CSS elementelor pot fi de asemenea adăugate și cu ajutorul atributului style. În aceasta și în câteva lecții următoare vom examina metodele de stilizare inline.

Acum nu vom mai conecta fișierul styles.css, ci vom transmite valorile corespunzătoare în atributul style sub formă de obiect cu stiluri pentru fiecare tag, pe care le vom scrie direct în fișierul componentei.

Așadar, să luăm componenta noastră fără stiluri CSS, pe care am făcut-o în lecția trecută:

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

Să în fișierul App.js înainte de comanda return să creăm un obiect cu stiluri CSS pentru div în variabila class1. Amintiți-vă că numele proprietăților aici se scriu în camelCase notație, iar valorile proprietăților trebuie să fie puse în ghilimele:

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

Acum să adăugăm obiectul class2 cu stiluri pentru primul paragraf:

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

Obiectul class3 cu stiluri pentru al doilea paragraf:

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

Și, în final class4 pentru ultimul:

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

Acum, pentru a aplica în componentă clasele CSS, vom folosi atributul style. Pentru primul paragraf aveam variabila class2, să o transmitem ca valoare:

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

În mod similar să adăugăm stiluri din obiecte pentru restul tagurilor.

În rezultat, codul componentei va arăta în felul următor:

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

Luați componenta React, pe care ați făcut-o în sarcina pentru lecția trecută, creați obiecte cu stiluri CSS pentru tagurile dvs., setați-le în atributele corespunzătoare style.