Compito

Procedere ora alla creazione del componente Alert, che renderizzerà tutti gli elementi passati come children e applicherà alcuni stili specifici. Il compito è:

1. Creare il componente Alert che contiene l'elemento div al suo interno.
2. L'elemento div deve avere come nome classe alert.
3. L'elemento div deve avere come contenuto la prop children.
4. L'elemento div deve avere il seguente CSS.

padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;

1. Per creare un elemento div nel componente, utilizzare <div>...</div>.
2. Per passare props.children come contenuto testuale, racchiuderlo tra {...} e impostare props.children. Risultato: <div>{props.children}</div>.
3. Per aggiungere un nome classe all'elemento div, utilizzare l'attributo className e impostarlo su alert. Risultato: className="alert".
4. Per importare il file con gli stili nel file index.js, utilizzare l'istruzione import e fornire il percorso corretto al file. Risultato: import './index.css'.
5. Per applicare gli stili all'elemento div, utilizzare il selettore del nome classe .alert e inserire gli stili indicati nel compito.