Aufgabe

Wir werden nun das Alert-Komponente erstellen, das alle als Kinder übergebenen Elemente rendert und einige spezifische Stile darauf anwendet. Die Aufgabe ist:

1. Erstellen Sie die Komponente Alert, die das div-Element enthält.
2. Das div-Element sollte den Klassennamen alert haben.
3. Das div-Element sollte die children-Eigenschaft als Inhalt haben.
4. Das div-Element sollte das folgende CSS haben.

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

1. Um ein div-Element im Component zu erstellen, verwenden Sie <div>...</div>.
2. Um props.children als Textinhalt zu übergeben, schließen Sie es in {...} ein und setzen Sie props.children. Ergebnis: <div>{props.children}</div>.
3. Um dem div-Element einen Klassennamen hinzuzufügen, verwenden Sie das className-Attribut und setzen Sie es auf alert. Ergebnis: className="alert".
4. Um die Datei mit den Stilen in der index.js-Datei zu importieren, verwenden Sie die import-Anweisung und geben Sie den korrekten Pfad zur Datei an. Ergebnis: import './index.css'.
5. Um Stile auf das div-Element anzuwenden, verwenden Sie den Klassennamen-Selektor .alert und fügen Sie die Stile aus der Aufgabe ein.