Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Utfordring: Bruk Inline-Stiler i en React-Komponent | Stylingsteknikker i React-applikasjoner
React Mastery

bookUtfordring: Bruk Inline-Stiler i en React-Komponent

Vi skal øve på å legge til inline-stiler i en React-komponent. Følg trinnene nedenfor for å fullføre utfordringen:

  1. Opprett en ny React-komponent kalt StyledBox.

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

  3. Legg til følgende inline-stiler på <div>-elementet:

    • Sett bakgrunnsfarge til "lightblue";
    • Sett bredde til "300px";
    • Sett polstring til "10px";
    • Sett kant-radius til "10px";
    • Sett tekstjustering til "center";
    • Sett skriftstørrelse til "24px";
    • Sett skriftvekt til "bold".

  4. Legg til noe tekstinnhold inne i <div>-elementet, for eksempel Five Finger Death Punch.

  1. Inline-stiler legges til ved å bruke style-attributtet, og verdien for dette attributtet skal være et objekt.
  2. Når du bruker inline-stiler, må verdier som ikke er rene tall (for eksempel strenger, enheter eller farger) omsluttes av anførselstegn "...". For eksempel indikerer margin: "30px" at margin-egenskapen har verdien 30px.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 4

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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

bookUtfordring: Bruk Inline-Stiler i en React-Komponent

Sveip for å vise menyen

Vi skal øve på å legge til inline-stiler i en React-komponent. Følg trinnene nedenfor for å fullføre utfordringen:

  1. Opprett en ny React-komponent kalt StyledBox.

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

  3. Legg til følgende inline-stiler på <div>-elementet:

    • Sett bakgrunnsfarge til "lightblue";
    • Sett bredde til "300px";
    • Sett polstring til "10px";
    • Sett kant-radius til "10px";
    • Sett tekstjustering til "center";
    • Sett skriftstørrelse til "24px";
    • Sett skriftvekt til "bold".

  4. Legg til noe tekstinnhold inne i <div>-elementet, for eksempel Five Finger Death Punch.

  1. Inline-stiler legges til ved å bruke style-attributtet, og verdien for dette attributtet skal være et objekt.
  2. Når du bruker inline-stiler, må verdier som ikke er rene tall (for eksempel strenger, enheter eller farger) omsluttes av anførselstegn "...". For eksempel indikerer margin: "30px" at margin-egenskapen har verdien 30px.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 4
some-alt