Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Anvend Ekstern CSS på en React-app | Stylingteknikker i React-applikationer
Introduktion til React

bookUdfordring: 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:

  1. Opret komponenten Alert, der indeholder et div-element.
  2. div-elementet skal have klassenavnet alert.
  3. div-elementet skal have children-proppen som indhold.
  4. div-elementet skal have følgende CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
  1. For at oprette et div-element i komponenten, brug <div>...</div>.
  2. For at indsætte props.children som tekstindhold, omslut det med {...} og angiv props.children. Resultat: <div>{props.children}</div>.
  3. For at tilføje et klassenavn til div-elementet, brug attributten className og sæt den til alert. Resultat: className="alert".
  4. For at importere filen med stilarter i index.js-filen, brug import-sætningen og angiv den korrekte sti til filen. Resultat: import './index.css'.
  5. For at anvende stilarter på div-elementet, brug klasseselektoren .alert og indsæt stilarterne fra opgaven.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 7

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

bookUdfordring: 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:

  1. Opret komponenten Alert, der indeholder et div-element.
  2. div-elementet skal have klassenavnet alert.
  3. div-elementet skal have children-proppen som indhold.
  4. div-elementet skal have følgende CSS.
padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;
  1. For at oprette et div-element i komponenten, brug <div>...</div>.
  2. For at indsætte props.children som tekstindhold, omslut det med {...} og angiv props.children. Resultat: <div>{props.children}</div>.
  3. For at tilføje et klassenavn til div-elementet, brug attributten className og sæt den til alert. Resultat: className="alert".
  4. For at importere filen med stilarter i index.js-filen, brug import-sætningen og angiv den korrekte sti til filen. Resultat: import './index.css'.
  5. For at anvende stilarter på div-elementet, brug klasseselektoren .alert og indsæt stilarterne fra opgaven.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 7
some-alt