Uppgift

Vi kommer nu att skapa komponenten Alert, som renderar alla element som skickas som children och applicerar specifika stilar på den. Uppgiften är:

1. Skapa komponenten Alert som innehåller ett div-element.
2. div-elementet ska ha klassnamnet alert.
3. div-elementet ska använda propet children som innehåll.
4. div-elementet ska ha följande CSS.

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

1. För att skapa ett div-element i komponenten, använd <div>...</div>.
2. För att använda props.children som textinnehåll, omslut det med {...} och ange props.children. Resultat: <div>{props.children}</div>.
3. För att lägga till ett klassnamn på div-elementet, använd attributet className och sätt det till alert. Resultat: className="alert".
4. För att importera filen med stilar i index.js-filen, använd import-satsen och ange rätt sökväg till filen. Resultat: import './index.css'.
5. För att applicera stilar på div-elementet, använd klassnamnsväljaren .alert och infoga stilarna från uppgiften.