Utfordring: Style et React-program

Oppgave

Vi skal nå lage Alert-komponenten, som skal gjengi alle elementene som sendes inn som children og bruke noen spesifikke stiler på den. Oppgaven er:

1. Lag komponenten Alert som inneholder et div-element.
2. div-elementet skal ha klassenavnet alert.
3. div-elementet skal bruke children-propen som innhold.
4. div-elementet skal ha følgende CSS.

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

1. For å lage et div-element i komponenten, bruk <div>...</div>.
2. For å sende inn props.children som tekstinnhold, omslutt det med {...} og bruk props.children. Resultat: <div>{props.children}</div>.
3. For å legge til et klassenavn på div-elementet, bruk attributtet className og sett det til alert. Resultat: className="alert".
4. For å importere filen med stilene i index.js-filen, bruk import-setningen og oppgi riktig filsti. Resultat: import './index.css'.
5. For å bruke stilene på div-elementet, bruk klassenavnvelgeren .alert og sett inn stilene fra oppgaven.