Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi : Utiliser les Styles en Ligne dans un Composant React | Techniques de Stylisation dans les Applications React
Maîtrise de React

bookDéfi : Utiliser les Styles en Ligne dans un Composant React

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

  1. Créer un nouveau composant React nommé StyledBox.

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

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

    • Définir la couleur de fond sur "lightblue" ;
    • Définir la largeur sur "300px" ;
    • Définir le remplissage sur "10px" ;
    • Définir le rayon de bordure sur "10px" ;
    • Définir l'alignement du texte sur "center" ;
    • Définir la taille de police sur "24px" ;
    • Définir la graisse de police sur "bold".

  4. Ajouter 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 à l'aide de 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 des nombres simples (comme les chaînes de caractères, les unités ou les couleurs) doivent être placées entre guillemets "...". Par exemple, margin: "30px" indique que la propriété margin a pour valeur 30px.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain how to add inline styles to a React component?

What does the `StyledBox` component look like with the specified styles?

Can you give me a step-by-step guide to complete this challenge?

Awesome!

Completion rate improved to 2.17

bookDéfi : Utiliser les Styles en Ligne dans un Composant React

Glissez pour afficher le menu

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

  1. Créer un nouveau composant React nommé StyledBox.

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

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

    • Définir la couleur de fond sur "lightblue" ;
    • Définir la largeur sur "300px" ;
    • Définir le remplissage sur "10px" ;
    • Définir le rayon de bordure sur "10px" ;
    • Définir l'alignement du texte sur "center" ;
    • Définir la taille de police sur "24px" ;
    • Définir la graisse de police sur "bold".

  4. Ajouter 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 à l'aide de 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 des nombres simples (comme les chaînes de caractères, les unités ou les couleurs) doivent être placées entre guillemets "...". Par exemple, margin: "30px" indique que la propriété margin a pour valeur 30px.

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4
some-alt