Nous allons pratiquer l'ajout de styles en ligne à un composant React. Suivez les étapes ci-dessous pour compléter le défi :

1. Créez un nouveau composant React appelé StyledBox .

2. À l'intérieur du composant StyledBox , rendez un élément <div> .

3. Ajoutez les styles en ligne suivants à l'élément <div> :

   • Définissez la couleur de fond à "lightblue" ;

   • Définissez la largeur à "300px" ;

   • Définissez le rembourrage à "10px" ;

   • Définissez le rayon de bordure à "10px" ;

   • Définissez l' alignement du texte à "center" ;

   • Définissez la taille de la police à "24px" ;

   • Définissez le poids de la police à "bold" .

4. Ajoutez du contenu textuel à l'intérieur de l'élément <div> , tel que Five Finger Death Punch .

1. Les styles en ligne sont ajoutés en utilisant l'attribut style , et la valeur de cet attribut doit être un objet.

2. Lors de l'utilisation de styles en ligne, les valeurs qui ne sont pas de simples nombres (comme les chaînes, les unités ou les couleurs) doivent être entourées de guillemets "..." . Par exemple, margin: "30px" indique que la propriété margin a une valeur de 30px .