Inserimento di dati nell'attributo style da un oggetto in React

Gli stili CSS possono essere aggiunti agli elementi anche utilizzando l'attributo style. In questa e nelle prossime lezioni esploreremo i metodi di styling in linea.

Ora non importeremo il file styles.css, ma passeremo i valori corrispondenti all'attributo style sotto forma di oggetto con gli stili per ogni tag, che scriveremo direttamente nel file del componente.

Quindi, prendiamo il nostro componente senza stili CSS, che abbiamo creato nella lezione precedente:

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

Nel file App.js, prima del comando return, creiamo un oggetto con gli stili CSS per il div in una variabile chiamata class1. Ricorda che i nomi delle proprietà qui sono scritti in camelCase e i valori delle proprietà devono essere racchiusi tra virgolette:

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

Ora aggiungiamo l'oggetto class2 con gli stili per il primo paragrafo:

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

L'oggetto class3 con gli stili per il secondo paragrafo:

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

E, infine, class4 per l'ultimo:

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

Ora, per applicare le classi CSS nel componente, utilizziamo l'attributo style. Per il primo paragrafo avevamo la variabile class2, passiamola come valore:

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

Aggiungiamo in modo simile gli stili dagli oggetti per gli altri tag.

Di conseguenza, il codice del componente apparirà così:

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

Prendi il componente React che hai creato nell'esercizio della lezione precedente, crea oggetti con stili CSS per i tuoi tag e assegnagli i rispettivi attributi style.