Inserimento di dati nell'attributo style da variabili in React

Nella lezione precedente abbiamo scritto l'oggetto direttamente nell' attributo style. Possiamo anche utilizzare l'inserimento di dati in questo oggetto da variabili.

Prendiamo il nostro componente React senza stili CSS:

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

Ora creeremo variabili e assegneremo loro i valori delle proprietà CSS. Iniziamo con ordine con gli stili per il div.

Nel file del componente, prima del comando return, creiamo la variabile wd1 e assegniamole il valore '200px':

const wd1 = '200px';

In modo simile creiamo variabili per tutti i valori delle proprietà del nostro div:

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

Ora aggiungiamo le variabili per il primo paragrafo:

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

Per il secondo paragrafo:

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

E, infine, per l'ultimo. Qui serviranno solo due, e non tre variabili. Non ha senso ripetersi, dato che il valore bold lo abbiamo già per il primo paragrafo:

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

E ora sostituiremo le variabili con i valori degli stili. Facciamolo per il primo paragrafo. Inseriamo le variabili co1 e fw1 al posto dei valori nell'oggetto:

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

In modo simile procediamo con gli altri tag.

Di conseguenza, il codice del nostro componente avrà questo aspetto:

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 il codice della soluzione del problema della lezione precedente in modo che i valori delle proprietà CSS siano memorizzati in variabili.