Wir werden das Hinzufügen von Inline-Stilen zu einer React-Komponente üben. Folgen Sie den unten stehenden Schritten, um die Herausforderung abzuschließen:

1. Erstellen Sie eine neue React-Komponente namens StyledBox.

2. Rendern Sie innerhalb der StyledBox-Komponente ein <div>-Element.

3. Fügen Sie dem <div>-Element die folgenden Inline-Stile hinzu:

   • Setzen Sie die Hintergrundfarbe auf "lightblue";

   • Setzen Sie die Breite auf "300px";

   • Setzen Sie das Padding auf "10px";

   • Setzen Sie den Rahmenradius auf "10px";

   • Setzen Sie die Textausrichtung auf "center";

   • Setzen Sie die Schriftgröße auf "24px";

   • Setzen Sie die Schriftstärke auf "bold".

4. Fügen Sie etwas Textinhalt in das <div>-Element ein, wie zum Beispiel Five Finger Death Punch.

1. Inline-Stile werden mit dem style-Attribut hinzugefügt, und der Wert für dieses Attribut sollte ein Objekt sein.

2. Bei der Verwendung von Inline-Stilen sollten Werte, die keine reinen Zahlen sind (wie Zeichenfolgen, Einheiten oder Farben), in Anführungszeichen "..." eingeschlossen werden. Zum Beispiel zeigt margin: "30px" an, dass die margin-Eigenschaft einen Wert von 30px hat.