Inserarea datelor în atributul style din variabile în React

În lecția precedentă am scris obiectul direct în atributul style. De asemenea, putem folosi inserarea datelor în acest obiect din variabile.

Să luăm componenta noastră React fără stiluri CSS:

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

Acum vom crea variabile și le vom atribui valori ale proprietăților CSS. Să începem pe rând cu stilurile pentru div.

În fișierul componentei înainte de comanda return vom crea variabila wd1 și îi vom atribui valoarea '200px':

const wd1 = '200px';

În mod similar vom crea variabile pentru toate valorile proprietăților div-ului nostru:

const wd1 = '200px';
const br1 = '2px solid brown';
const pd1 = '10px';
const ta1 = 'center';

Acum să adăugăm variabile pentru primul paragraf:

const co1 = 'orangered';
const fw1 = 'bold';

Pentru al doilea paragraf:

const fs1 = 'italic';
const co2 = 'brown';

Și, în final, pentru ultimul. Aici vor fi necesare doar două, nu trei variabile. Nu are sens să repetăm, deoarece valoarea bold o avem deja pentru primul paragraf:

const bco1 = 'orange';
const co3 = 'white';

Iar acum vom substitui variabilele cu valorile stilurilor. Să facem asta pentru primul paragraf. Să inserăm variabilele co1 și fw1 în locul valorilor în obiect:

<p style = {{ color: co1, fontWeight: fw1 }}>
	text
</p>

În mod similar vom proceda cu restul tagurilor.

În rezultat, codul componentei noastre va arăta astfel:

function App() {
	const wd1 = '200px';
	const br1 = '2px solid brown';
	const pd1 = '10px';
	const ta1 = 'center';

	const co1 = 'orangered';
	const fw1 = 'bold';

	const fs1 = 'italic';
	const co2 = 'brown';
	
	const bco1 = 'orange';
	const co3 = 'white';

	return (
		<div style = {{
			width: wd1,
			border: br1,
			padding: pd1,
			textAlign: ta1 }}>
			<p style = {{ color: co1, fontWeight: fw1 }}>
				text
			</p>
			<p style = {{ fontStyle: fs1, color: co2 }}>
				text
			</p>
			<p style = {{ 
				backgroundColor: bco1,
				fontWeight: fw1,
				color: co3 }}>
				text
			</p>
		</div>
	);
}

Modificați codul soluției problemei din lecția precedentă astfel încât valorile proprietăților CSS să fie stocate în variabile.