Taak

We gaan nu verder met het maken van de Alert-component, die alle elementen die als children worden doorgegeven zal weergeven en hierop specifieke stijlen 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. Om een div-element in de component te maken, gebruik <div>...</div>.
2. Om props.children als tekstinhoud door te geven, plaats deze binnen {...} en stel props.children in. Resultaat: <div>{props.children}</div>.
3. Om een classnaam toe te voegen aan het div-element, gebruik het className-attribuut en stel dit in op alert. Resultaat: className="alert".
4. Om het bestand met stijlen te importeren in het index.js-bestand, gebruik de import-verklaring en geef het juiste pad naar het bestand op. Resultaat: import './index.css'.
5. Om stijlen toe te passen op het div-element, gebruik de classnaam-selector .alert en voeg de stijlen uit de opdracht toe.