Lavorare con gli stili CSS nell'attributo style in React

Nelle lezioni precedenti nell'attributo style abbiamo passato una variabile contenente un oggetto con gli stili CSS. Puoi non utilizzare una variabile intermedia, ma scrivere l'oggetto direttamente nell'attributo - in questo caso ci servono due paia di parentesi graffe - la prima per l'inserimento JSX e la seconda - per l'oggetto.

Quindi, prendiamo il nostro componente senza stili CSS:

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

Ad esempio, scriviamo direttamente le proprietà CSS per il primo paragrafo del nostro componente React App:

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	testo
</p>

In modo simile aggiungiamo gli stili per gli altri tag.

Di conseguenza, il codice del componente avrà il seguente aspetto:

function App() {
	return (
		<div style = {{
			width: '200px',
			border: '2px solid brown',
			padding: '10px',
			textAlign: 'center' }}>
			<p style={{
				color: 'orangered',
				fontWeight: 'bold' }}>
				testo
			</p>
			<p style = {{
				fontStyle: 'brown',
				color: 'brown' }}>
				testo
			</p>
			<p style = {{
				backgroundColor: 'orange',
				fontWeight: 'bold',
				color: 'white' }}>
				testo
			</p>
		</div>
	);
}

Prendi il componente React che hai realizzato nell'esercizio della lezione precedente. Aggiungi gli stili ad ogni tag direttamente nell'attributo style, come mostrato in questa lezione.