CSS-moduler gir en måte å lokalt omfange CSS-klassenavn. Du trenger ikke å bekymre deg for å overstyre stiler når du bruker samme klassenavn.

Finn ut hvordan CSS-moduler fungerer, hvorfor du bør bruke dem, og hvordan du implementerer dem i et React-prosjekt.

Hva er CSS-moduler?

De CSS-moduler dokumenter beskriv en CSS-modul som en CSS-fil hvis klassenavn er lokalt dekket som standard. Dette betyr at du kan adressere CSS-variabler med samme navn i forskjellige CSS-filer.

Du skriver CSS-modulklasser akkurat som vanlige klasser. Deretter genererer kompilatoren unike klassenavn før CSS sendes til nettleseren.

Tenk for eksempel på følgende .btn-klasse i en fil kalt styles.modules.css:

.btn {
 bredde: 90px;
 høyde: 40px;
 polstring: 10px 20px;
}

For å bruke denne filen, må du importere den til en JavaScript-fil.

import stiler fra "./styles.module.js"

Nå, for å referere til .btn-klassen og gjøre den tilgjengelig i et element, bruker du klassen som vist nedenfor:

klasse="styles.btn"

Byggeprosessen vil erstatte CSS-klassen med et unikt navn på formatet _styles__btn_118346908.

instagram viewer

Det unike med klassenavnene betyr at selv om du bruker samme klassenavn for forskjellige komponenter, vil de ikke kollidere. Du kan garantere større kodeuavhengighet siden du kan lagre en komponents CSS-stiler i en enkelt fil, spesifikk for den komponenten.

Dette forenkler feilsøking, spesielt hvis du jobber med flere stilark. Du trenger bare å spore opp CSS-modulen for en bestemt komponent.

CSS-moduler lar deg også kombinere flere klasser gjennom komponerer nøkkelord. Tenk for eksempel på følgende .btn-klasse ovenfor. Du kan "utvide" den klassen i andre klasser ved å bruke komposisjoner.

For en send-knapp kan du ha:

.btn {
/* stiler */
}
.sende inn {
 komponerer: btn;
 bakgrunnsfarge: grønn;
 farge:#FFFFFF
}

Dette kombinerer .btn- og .submit-klassene. Du kan også komponere stiler fra en annen CSS-modul som dette:

.sende inn {
 komponerer: primær fra "./colors.css"
 bakgrunnsfarge: grønn;
}

Merk at du må skrive komponer-regelen før andre regler.

Hvordan bruke CSS-moduler i React

Hvordan du bruker CSS-moduler i React avhenger av hvordan du lager React-applikasjonen.

Hvis du bruker create-react-app, settes CSS-moduler opp umiddelbart. Men hvis du skal lage applikasjonen fra bunnen av, må du konfigurere CSS-moduler med en kompilator som webpack.

For å følge med på denne opplæringen, bør du ha:

  • Node installert på maskinen din.
  • En grunnleggende forståelse av ES6-moduler.
  • En grunnleggende forståelse av React.

Opprette en React-applikasjon

For å gjøre ting enkelt, kan du bruke lag-reager-app for å stillasere en React-app.

Kjør denne kommandoen til opprette et nytt React-prosjekt kalt react-css-moduler:

npx skape-react-app react-css-moduler

Dette vil generere en ny fil kalt react-css-modules med alle avhengighetene som kreves for å komme i gang med React.

Opprette en knappekomponent

Du vil opprette en Button-komponent og en CSS-modul kalt Button.module.css i dette trinnet. I src-mappen oppretter du en ny mappe kalt Components. Opprett en annen mappe som heter Button i den mappen. Du vil legge til Button-komponenten og dens stiler i denne mappen.

Navigere til src/Components/Button og lag Button.js.

eksportmisligholdefunksjonKnapp() {
komme tilbake (
<knapp>Sende inn</button>
 )
}

Deretter oppretter du en ny fil kalt Button.module.css og legger til følgende.

.btn {
 bredde: 90px;
 høyde: 40px;
 polstring: 10px 20px;
 kantradius: 4px;
 grense: ingen;
}

For å bruke denne klassen i Button-komponenten, importer den som stiler og referer til den i klassenavnet til knappeelementet slik:

import stiler fra "./Button.module.css"
eksportmisligholdefunksjonKnapp() {
komme tilbake (
<button className={styles.btn}>Sende inn</button>
 )
}

Dette er et enkelt eksempel som viser hvordan du bruker en enkelt klasse. Det kan være lurt å dele stiler på tvers av forskjellige komponenter eller til og med kombinere klasser. For dette kan du bruke nøkkelordet composes som tidligere nevnt i denne artikkelen.

Ved hjelp av komposisjon

Først endrer du Button-komponenten med følgende kode.

import stiler fra "./Button.module.css"
eksportmisligholdefunksjonKnapp({type="primary", label="Button"}) {
komme tilbake (
<button className={styles[type]}>{merkelapp}</button>
 )
}

Denne koden gjør Button-komponenten mer dynamisk ved å akseptere en typeverdi som en prop. Denne typen vil bestemme klassenavnet som brukes på knappeelementet. Så hvis knappen er en send-knapp, vil klassenavnet være "send". Hvis det er "feil", vil klassenavnet være "feil", og så videre.

For å bruke nøkkelordet composes i stedet for å skrive alle stilene for hver knapp fra bunnen av, legg til følgende i Button.module.css.

.btn {
 bredde: 90px;
 høyde: 40px;
 polstring: 10px 20px;
 kantradius: 4px;
 grense: ingen;
}
.hoved {
 komponerer: btn;
 farge: #FFFFFF;
 bakgrunnsfarge: #6E41E2;
}
.sekundær {
 komponerer: btn;
 farge: #6E41E2;
 bakgrunnsfarge: #FFFFFF;
}

I dette eksemplet bruker primærklassen og sekundærklassen btn-klassen. Ved å gjøre dette reduserer du mengden kode du trenger å skrive.

Du kan ta dette enda lenger med en ekstern CSS-modul kalt colors.module.css, som inneholder fargene som brukes i applikasjonen. Du kan da bruke denne modulen i andre moduler. Lag for eksempel filen colors.module.css i roten av Components-mappen med følgende kode:

.primærBg {
 bakgrunnsfarge: #6E41E2
}
.secondaryBg {
 bakgrunnsfarge: #FFFFFF
}
.primaryColor {
 farge: #FFFFFF
}
.secondaryColor {
 farge: #6E41E2
}

Nå i Button/Button.module.css-filen, endre primær- og sekundærklassene for å bruke de ovennevnte klassene slik:

.hoved {
 komponerer: btn;
 komponerer: primærFarge fra "../colors.module.css";
 komponerer: primærBg fra "../colors.module.css";
}
.sekundær {
 komponerer: btn;
 komponerer: sekundærFarge fra "../colors.module.css";
 komponerer: sekundærBg fra "../colors.module.css";
}

Sass med CSS-moduler

Du kan bruke CSS-moduler for å forbedre modulariteten til kodebasen din. Som et eksempel kan du lage en enkel CSS-klasse for en knappekomponent og gjenbruke CSS-klasser gjennom komposisjon.

For å øke bruken av CSS-moduler, bruk Sass. Sass – Syntactically Awesome Style Sheets – er en CSS-forprosessor som gir massevis av funksjoner. De inkluderer støtte for nesting, variabler og arv som ikke er tilgjengelig i CSS. Med Sass kan du legge til mer komplekse funksjoner i applikasjonen din.