Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Udfordring: Brug Inline-Stilarter i en React-Komponent | Stylingteknikker i React-applikationer
React Mastery

bookUdfordring: Brug Inline-Stilarter i en React-Komponent

Vi vil øve os i at tilføje inline-stilarter til en React-komponent. Følg trinene nedenfor for at fuldføre udfordringen:

  1. Opret en ny React-komponent kaldet StyledBox.

  2. Inde i StyledBox-komponenten, render et <div>-element.

  3. Tilføj følgende inline-stilarter til <div>-elementet:

    • Indstil baggrundsfarven til "lightblue";
    • Indstil bredden til "300px";
    • Indstil polstringen til "10px";
    • Indstil kantens radius til "10px";
    • Indstil tekstjusteringen til "center";
    • Indstil skriftstørrelsen til "24px";
    • Indstil skrifttypens vægt til "bold".

  4. Tilføj noget tekstindhold inde i <div>-elementet, såsom Five Finger Death Punch.

  1. Inline-stilarter tilføjes ved hjælp af attributten style, og værdien for denne attribut skal være et objekt.
  2. Når der bruges inline-stilarter, skal værdier, der ikke er rene tal (såsom strenge, enheder eller farver), være omsluttet af anførselstegn "...". For eksempel angiver margin: "30px" at egenskaben margin har værdien 30px.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

bookUdfordring: Brug Inline-Stilarter i en React-Komponent

Stryg for at vise menuen

Vi vil øve os i at tilføje inline-stilarter til en React-komponent. Følg trinene nedenfor for at fuldføre udfordringen:

  1. Opret en ny React-komponent kaldet StyledBox.

  2. Inde i StyledBox-komponenten, render et <div>-element.

  3. Tilføj følgende inline-stilarter til <div>-elementet:

    • Indstil baggrundsfarven til "lightblue";
    • Indstil bredden til "300px";
    • Indstil polstringen til "10px";
    • Indstil kantens radius til "10px";
    • Indstil tekstjusteringen til "center";
    • Indstil skriftstørrelsen til "24px";
    • Indstil skrifttypens vægt til "bold".

  4. Tilføj noget tekstindhold inde i <div>-elementet, såsom Five Finger Death Punch.

  1. Inline-stilarter tilføjes ved hjælp af attributten style, og værdien for denne attribut skal være et objekt.
  2. Når der bruges inline-stilarter, skal værdier, der ikke er rene tal (såsom strenge, enheder eller farver), være omsluttet af anførselstegn "...". For eksempel angiver margin: "30px" at egenskaben margin har værdien 30px.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 4
some-alt