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

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