Udfordring: Anvend Ekstern CSS på en React-app
Opgave
Vi skal nu oprette Alert-komponenten, som skal gengive alle elementer, der sendes som children, og anvende nogle specifikke stilarter på den. Opgaven er:
- Opret komponenten
Alert, der indeholder etdiv-element. div-elementet skal have klassenavnetalert.div-elementet skal havechildren-proppen som indhold.div-elementet skal have følgende CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
- For at oprette et
div-element i komponenten, brug<div>...</div>. - For at indsætte
props.childrensom tekstindhold, omslut det med{...}og angivprops.children. Resultat:<div>{props.children}</div>. - For at tilføje et klassenavn til
div-elementet, brug attributtenclassNameog sæt den tilalert. Resultat:className="alert". - For at importere filen med stilarter i
index.js-filen, brugimport-sætningen og angiv den korrekte sti til filen. Resultat:import './index.css'. - For at anvende stilarter på
div-elementet, brug klasseselektoren.alertog indsæt stilarterne fra opgaven.
Var alt klart?
Tak for dine kommentarer!
Sektion 2. Kapitel 7
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Awesome!
Completion rate improved to 2.17
Udfordring: Anvend Ekstern CSS på en React-app
Stryg for at vise menuen
Opgave
Vi skal nu oprette Alert-komponenten, som skal gengive alle elementer, der sendes som children, og anvende nogle specifikke stilarter på den. Opgaven er:
- Opret komponenten
Alert, der indeholder etdiv-element. div-elementet skal have klassenavnetalert.div-elementet skal havechildren-proppen som indhold.div-elementet skal have følgende CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
- For at oprette et
div-element i komponenten, brug<div>...</div>. - For at indsætte
props.childrensom tekstindhold, omslut det med{...}og angivprops.children. Resultat:<div>{props.children}</div>. - For at tilføje et klassenavn til
div-elementet, brug attributtenclassNameog sæt den tilalert. Resultat:className="alert". - For at importere filen med stilarter i
index.js-filen, brugimport-sætningen og angiv den korrekte sti til filen. Resultat:import './index.css'. - For at anvende stilarter på
div-elementet, brug klasseselektoren.alertog indsæt stilarterne fra opgaven.
Var alt klart?
Tak for dine kommentarer!
Sektion 2. Kapitel 7