Uitdaging: Een React-Toepassing Stijlen

Taak

We gaan nu verder met het maken van de Alert-component, die alle elementen weergeeft die als children worden doorgegeven en hier specifieke stijlen op toepast. De opdracht is:

1. Maak de component Alert met daarin het div-element.
2. Het div-element moet de classnaam alert hebben.
3. Het div-element moet de children-prop als inhoud hebben.
4. Het div-element moet de volgende CSS bevatten.

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

1. Gebruik div om een <div>...</div>-element in de component te maken.
2. Om props.children als tekstinhoud door te geven, plaats deze binnen {...} en stel props.children in. Resultaat: <div>{props.children}</div>.
3. Voeg een classnaam toe aan het div-element met het attribuut className en stel deze in op alert. Resultaat: className="alert".
4. Importeer het bestand met stijlen in het index.js-bestand met het import-statement en geef het juiste pad naar het bestand op. Resultaat: import './index.css'.
5. Gebruik de classnaam-selector div om stijlen toe te passen op het .alert-element en voeg de stijlen uit de opdracht toe.