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.