Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Arbeide med CSS-moduler | Oppsett av et Next.js-prosjekt
Next.js 14-mestring for Bygging av Moderne Webapplikasjoner

bookArbeide med CSS-moduler

CSS-moduler oppretter automatisk unike klassenavn, noe som gir CSS-avgrensning til en spesifikk komponent og eliminerer stilkollisjoner. Enkle CSS-regler kan skrives inne i CSS-modulene.

Tilbake til prosjektet

Opprett en CSS-modul kalt home.module.css i mappen app/ui og lim inn følgende CSS-regler:

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: rgb(255 255 255);
  border-radius: 9999px;
}

Vi bør importere filen home.module.css inn i app/page.tsx-filen og deretter bruke klassen styles.circlediv-elementet vi opprettet tidligere.

I praksis

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 6

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:

How do I create a CSS module in the app/ui folder?

Can you explain how to import and use the CSS module in page.tsx?

What does the .circle class do in this example?

Awesome!

Completion rate improved to 2.08

bookArbeide med CSS-moduler

Sveip for å vise menyen

CSS-moduler oppretter automatisk unike klassenavn, noe som gir CSS-avgrensning til en spesifikk komponent og eliminerer stilkollisjoner. Enkle CSS-regler kan skrives inne i CSS-modulene.

Tilbake til prosjektet

Opprett en CSS-modul kalt home.module.css i mappen app/ui og lim inn følgende CSS-regler:

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: rgb(255 255 255);
  border-radius: 9999px;
}

Vi bør importere filen home.module.css inn i app/page.tsx-filen og deretter bruke klassen styles.circlediv-elementet vi opprettet tidligere.

I praksis

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 6
some-alt