Défi : Styles en Ligne
Nous allons pratiquer l'ajout de styles en ligne à un composant React. Suivez les étapes ci-dessous pour compléter le défi :
-
Créez un nouveau composant React appelé
StyledBox
. -
À l'intérieur du composant
StyledBox
, rendez un élément<div>
. -
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"
.
- Définissez la couleur de fond à
-
Ajoutez du contenu textuel à l'intérieur de l'élément
<div>
, tel queFive Finger Death Punch
.
- Les styles en ligne sont ajoutés en utilisant l'attribut
style
, et la valeur de cet attribut doit être un objet. - 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 de30px
.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.17
Défi : Styles en Ligne
Glissez pour afficher le menu
Nous allons pratiquer l'ajout de styles en ligne à un composant React. Suivez les étapes ci-dessous pour compléter le défi :
-
Créez un nouveau composant React appelé
StyledBox
. -
À l'intérieur du composant
StyledBox
, rendez un élément<div>
. -
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"
.
- Définissez la couleur de fond à
-
Ajoutez du contenu textuel à l'intérieur de l'élément
<div>
, tel queFive Finger Death Punch
.
- Les styles en ligne sont ajoutés en utilisant l'attribut
style
, et la valeur de cet attribut doit être un objet. - 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 de30px
.
Merci pour vos commentaires !