Lære Anvendelse af Betingede Stilarter | Opsætning af et Next.js-projekt

Vi kan betinge anvendelsen af styles baseret på tilstand eller andre faktorer ved hjælp af clsx-biblioteket. Du kan finde dokumentationen her, men vi gennemgår de vigtigste koncepter nu.

Forestil dig, at vi skal ændre farven på et element baseret på status i InvoiceStatus-komponenten. Følgende betingelser gælder:

Hvis status er awaiting, skal baggrundsfarven være rød, og tekstfarven skal være hvid;
Hvis status er fulfilled, skal baggrundsfarven være gul, og tekstfarven skal være blå.

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 7

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

Suggested prompts:

Can you explain how the `clsx` library works in this example?

What should I do if I want to add more status types with different styles?

Can you show how to display the appropriate icon for each status?

Awesome!

Completion rate improved to 2.08

Stryg for at vise menuen

Vi kan betinge anvendelsen af styles baseret på tilstand eller andre faktorer ved hjælp af clsx-biblioteket. Du kan finde dokumentationen her, men vi gennemgår de vigtigste koncepter nu.

Forestil dig, at vi skal ændre farven på et element baseret på status i InvoiceStatus-komponenten. Følgende betingelser gælder:

Hvis status er awaiting, skal baggrundsfarven være rød, og tekstfarven skal være hvid;
Hvis status er fulfilled, skal baggrundsfarven være gul, og tekstfarven skal være blå.

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 7