Herausforderung: Eine React-Anwendung Stylen

Aufgabe

Wir werden nun die Komponente Alert erstellen, die alle als Children übergebenen Elemente rendert und spezifische Stile darauf anwendet. Die Aufgabe lautet:

1. Erstelle die Komponente Alert, die ein div-Element enthält.
2. Das div-Element soll den Klassennamen alert besitzen.
3. Das div-Element soll die children-Prop als Inhalt haben.
4. Das div-Element soll folgendes CSS erhalten:

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

1. Um ein div-Element in der Komponente zu erstellen, verwende <div>...</div>.
2. Um props.children als Textinhalt zu übergeben, schließe es in {...} ein und setze props.children. Ergebnis: <div>{props.children}</div>.
3. Um dem div-Element einen Klassennamen hinzuzufügen, verwende das Attribut className und setze es auf alert. Ergebnis: className="alert".
4. Um die Datei mit den Styles in der index.js-Datei zu importieren, verwende das import-Statement und gib den korrekten Pfad zur Datei an. Ergebnis: import './index.css'.
5. Um Styles auf das div-Element anzuwenden, verwende den Klassenselektor .alert und füge die Styles aus der Aufgabe ein.