Udfordring: Style en React-applikation

Opgave

Vi skal nu oprette Alert-komponenten, som skal gengive alle elementer, der gives videre som children, og anvende specifikke stilarter på den. Opgaven er:

1. Opret komponenten Alert, der indeholder et div-element.
2. div-elementet skal have klassenavnet alert.
3. div-elementet skal have children-proppen som indhold.
4. div-elementet skal have følgende CSS.

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

1. For at oprette et div-element i komponenten, brug <div>...</div>.
2. For at indsætte props.children som tekstindhold, omslut det med {...} og angiv props.children. Resultat: <div>{props.children}</div>.
3. For at tilføje et klassenavn til div-elementet, brug attributten className og sæt den til alert. Resultat: className="alert".
4. For at importere filen med stilarter i index.js-filen, brug import-sætningen og angiv den korrekte sti til filen. Resultat: import './index.css'.
5. For at anvende stilarter på div-elementet, brug klassenavn-selektoren .alert og indsæt stilarterne fra opgaven.