CSS-moduulit tarjoavat tavan paikallistaa CSS-luokkanimiä. Sinun ei tarvitse huolehtia tyylien ohittamisesta, kun käytät samaa luokan nimeä.

Ota selvää, miten CSS-moduulit toimivat, miksi niitä kannattaa käyttää ja miten ne toteutetaan React-projektissa.

Mitä ovat CSS-moduulit?

The CSS-moduulien dokumentit kuvaile CSS-moduulia CSS-tiedostona, jonka luokkanimet ovat oletuksena paikallisesti suojattuja. Tämä tarkoittaa, että voit osoittaa CSS-muuttujia samalla nimellä eri CSS-tiedostoissa.

Kirjoitat CSS-moduuliluokkia aivan kuten normaalit luokat. Sitten kääntäjä luo yksilölliset luokkanimet ennen CSS: n lähettämistä selaimeen.

Harkitse esimerkiksi seuraavaa .btn-luokkaa tiedostossa styles.modules.css:

.btn {
 leveys: 90px;
 korkeus: 40px;
 täyte: 10px 20px;
}

Jotta voit käyttää tätä tiedostoa, sinun on tuotava se JavaScript-tiedostoon.

tuonti tyylejä alkaen "./styles.module.js"

Jos haluat nyt viitata .btn-luokkaan ja tehdä sen saataville elementissä, käytä luokkaa alla esitetyllä tavalla:

luokkaa="tyylit.btn"
instagram viewer

Rakennusprosessi korvaa CSS-luokan yksilöllisellä muodon nimellä, kuten _styles__btn_118346908.

Luokkien nimien ainutlaatuisuus tarkoittaa, että vaikka käyttäisit samaa luokan nimeä eri komponenteille, ne eivät törmää. Voit taata suuremman koodiriippumattomuuden, koska voit tallentaa komponentin CSS-tyylit yhteen tiedostoon, joka on ominaista kyseiselle komponentille.

Tämä yksinkertaistaa virheenkorjausta, varsinkin jos työskentelet useiden tyylitaulukoiden kanssa. Sinun tarvitsee vain jäljittää tietyn komponentin CSS-moduuli.

CSS-moduulien avulla voit myös yhdistää useita luokkia säveltää avainsana. Harkitse esimerkiksi seuraavaa .btn-luokkaa yllä. Voit "pidentää" tätä luokkaa muilla luokilla sävellysten avulla.

Lähetä-painikkeella sinulla voi olla:

.btn {
/* tyylit */
}
.Lähetä {
 säveltää: btn;
 taustaväri: vihreä;
 väri:#FFFFFF
}

Tämä yhdistää .btn- ja .submit-luokat. Voit myös luoda tyylejä toisesta CSS-moduulista seuraavasti:

.Lähetä {
 säveltää: ensisijainen alkaen "./colors.css"
 taustaväri: vihreä;
}

Huomaa, että kirjoitussääntö on kirjoitettava ennen muita sääntöjä.

Kuinka käyttää CSS-moduuleja Reactissa

Kuinka käytät CSS-moduuleja Reactissa, riippuu siitä, kuinka luot React-sovelluksen.

Jos käytät luo-react-sovellusta, CSS-moduulit määritetään heti. Jos kuitenkin aiot luoda sovelluksen tyhjästä, sinun on määritettävä CSS-moduulit kääntäjällä, kuten webpack.

Jotta voit seurata tätä opetusohjelmaa, sinulla tulee olla:

  • Koneeseesi asennettu solmu.
  • Perustiedot ES6-moduuleista.
  • Perus ymmärrystä Reactista.

React-sovelluksen luominen

Jotta asiat olisivat yksinkertaisia, voit käyttää luo-reagoi-sovellus rakentaaksesi React-sovelluksen.

Suorita tämä komento kohteeseen Luo uusi React-projekti kutsutaan react-css-moduuleiksi:

npx luoda-react-app react-css-moduulit

Tämä luo uuden tiedoston nimeltä react-css-modules, jossa on kaikki Reactin käytön aloittamiseen tarvittavat riippuvuudet.

Painikekomponentin luominen

Luot Button-komponentin ja CSS-moduulin nimeltä Button.module.css tässä vaiheessa. Luo src-kansioon uusi kansio nimeltä Components. Luo kyseiseen kansioon toinen kansio nimeltä Button. Lisäät Button-komponentin ja sen tyylit tähän kansioon.

Navigoida johonkin src/Components/Button ja luo Button.js.

viedäoletuksenatoimintoPainike() {
palata (
<-painiketta>Lähetä</button>
 )
}

Luo seuraavaksi uusi tiedosto nimeltä Button.module.css ja lisää seuraava.

.btn {
 leveys: 90px;
 korkeus: 40px;
 täyte: 10px 20px;
 reunan säde: 4px;
 reuna: ei mitään;
}

Jos haluat käyttää tätä luokkaa Button-komponentissa, tuo se tyyleinä ja viittaa siihen painikeelementin luokan nimessä seuraavasti:

tuonti tyylejä alkaen "./Button.module.css"
viedäoletuksenatoimintoPainike() {
palata (
<painike className={styles.btn}>Lähetä</button>
 )
}

Tämä on yksinkertainen esimerkki, joka näyttää kuinka käyttää yhtä luokkaa. Haluat ehkä jakaa tyylejä eri komponenttien kesken tai jopa yhdistää luokkia. Tätä varten voit käyttää kirjoittamis-avainsanaa, kuten aiemmin mainittiin tässä artikkelissa.

Koostumuksen käyttäminen

Muokkaa ensin Button-komponenttia seuraavalla koodilla.

tuonti tyylejä alkaen "./Button.module.css"
viedäoletuksenatoimintoPainike({type="primary", label="Button"}) {
palata (
<button className={styles[type]}>{label}</button>
 )
}

Tämä koodi tekee Button-komponentista dynaamisemman hyväksymällä tyyppiarvon ehdotuksena. Tämä tyyppi määrittää painikeelementtiin käytetyn luokan nimen. Joten jos painike on lähetyspainike, luokan nimi on "lähetä". Jos se on "error", luokan nimi on "error" ja niin edelleen.

Jos haluat käyttää kirjoittamis-avainsanaa sen sijaan, että kirjoitat jokaisen painikkeen kaikki tyylit tyhjästä, lisää seuraava Button.module.css-tiedostoon.

.btn {
 leveys: 90px;
 korkeus: 40px;
 täyte: 10px 20px;
 reunan säde: 4px;
 reuna: ei mitään;
}
.ensisijainen {
 säveltää: btn;
 väri: #FFFFFF;
 taustaväri: #6E41E2;
}
.toissijainen {
 säveltää: btn;
 väri: #6E41E2;
 taustaväri: #FFFFFF;
}

Tässä esimerkissä perusluokka ja toissijainen luokka käyttävät btn-luokkaa. Tekemällä tämän pienennät kirjoitettavan koodin määrää.

Voit viedä tätä vielä pidemmälle ulkoisella CSS-moduulilla nimeltä värit.moduuli.css, joka sisältää sovelluksessa käytetyt värit. Voit sitten käyttää tätä moduulia muissa moduuleissa. Luo esimerkiksi Color.module.css-tiedosto Components-kansion juureen seuraavalla koodilla:

.primaryBg {
 taustaväri: #6E41E2
}
.secondaryBg {
 taustaväri: #FFFFFF
}
.primaryColor {
 väri: #FFFFFF
}
.secondaryColor {
 väri: #6E41E2
}

Muokkaa nyt Button/Button.module.css-tiedostossa ensisijaiset ja toissijaiset luokat käyttämään yllä olevia luokkia seuraavasti:

.ensisijainen {
 säveltää: btn;
 säveltää: ensisijainen väri "../colors.module.css";
 säveltää: primääriBg alkaen "../colors.module.css";
}
.toissijainen {
 säveltää: btn;
 säveltää: Secondary Väri alkaen "../colors.module.css";
 säveltää: SecondaryBg from "../colors.module.css";
}

Sass CSS-moduuleilla

Voit parantaa koodikantasi modulaarisuutta CSS-moduuleilla. Esimerkkinä voit luoda yksinkertaisen CSS-luokan painikekomponentille ja käyttää CSS-luokkia uudelleen koostumuksen avulla.

Käytä Sassia tehostaaksesi CSS-moduulien käyttöä. Sass – Syntactically Awesome Style Sheets – on CSS-esiprosessori, joka tarjoaa runsaasti ominaisuuksia. Ne sisältävät tuen sisäkkäisyydelle, muuttujille ja periytymiselle, jotka eivät ole saatavilla CSS: ssä. Sassin avulla voit lisätä sovellukseesi monimutkaisempia ominaisuuksia.