Utfordring: 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:
-
Opprett en ny React-komponent kalt
StyledBox
. -
Inne i
StyledBox
-komponenten, render et<div>
-element. -
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"
.
- Sett bakgrunnsfarge til
-
Legg til noe tekstinnhold inne i
<div>
-elementet, for eksempelFive Finger Death Punch
.
- Inline-stiler legges til ved å bruke
style
-attributtet, og verdien for dette attributtet skal være et objekt. - 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 indikerermargin: "30px"
atmargin
-egenskapen har verdien30px
.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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
Utfordring: 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:
-
Opprett en ny React-komponent kalt
StyledBox
. -
Inne i
StyledBox
-komponenten, render et<div>
-element. -
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"
.
- Sett bakgrunnsfarge til
-
Legg til noe tekstinnhold inne i
<div>
-elementet, for eksempelFive Finger Death Punch
.
- Inline-stiler legges til ved å bruke
style
-attributtet, og verdien for dette attributtet skal være et objekt. - 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 indikerermargin: "30px"
atmargin
-egenskapen har verdien30px
.
Takk for tilbakemeldingene dine!