CSS moduliai suteikia galimybę lokaliai aprėpti CSS klasių pavadinimus. Nereikia jaudintis dėl stilių nepaisymo, kai naudojate tą patį klasės pavadinimą.

Sužinokite, kaip veikia CSS moduliai, kodėl turėtumėte juos naudoti ir kaip juos įdiegti React projekte.

Kas yra CSS moduliai?

The CSS modulių dokumentai apibūdinkite CSS modulį kaip CSS failą, kurio klasių pavadinimai pagal numatytuosius nustatymus taikomi lokaliai. Tai reiškia, kad galite adresuoti CSS kintamuosius tuo pačiu pavadinimu skirtinguose CSS failuose.

CSS modulio klases rašote kaip ir įprastas klases. Tada kompiliatorius sugeneruoja unikalius klasių pavadinimus prieš siųsdamas CSS į naršyklę.

Pavyzdžiui, apsvarstykite šią .btn klasę faile styles.modules.css:

.btn {
 plotis: 90 pikselių;
 aukštis: 40px;
 užpildymas: 10 piks. 20 piks.;
}

Norėdami naudoti šį failą, turite jį importuoti į JavaScript failą.

importuoti stiliai iš "./styles.module.js"

Dabar, norėdami nurodyti .btn klasę ir padaryti ją prieinamą elemente, naudokite klasę, kaip parodyta toliau:

instagram viewer 
klasė="styles.btn"

Sukūrimo procesas pakeis CSS klasę unikaliu formato pavadinimu, pvz., _styles__btn_118346908.

Klasių pavadinimų unikalumas reiškia, kad net jei naudosite tą patį klasės pavadinimą skirtingiems komponentams, jie nesusidurs. Galite garantuoti didesnę kodo nepriklausomybę, nes galite išsaugoti komponento CSS stilius viename faile, būdingame tam komponentui.

Tai supaprastina derinimą, ypač jei dirbate su keliais stiliaus lapais. Jums reikės tik susekti konkretaus komponento CSS modulį.

CSS moduliai taip pat leidžia sujungti kelias klases komponuoja raktažodį. Pavyzdžiui, apsvarstykite aukščiau pateiktą .btn klasę. Galite „pratęsti“ tą klasę kitose klasėse naudodami kompozicijas.

Norėdami pateikti mygtuką, galite turėti:

.btn {
/* stiliai */
}
.Pateikti {
 komponuoja: btn;
 fono spalva: žalia;
 spalva:#FFFFFF
}

Tai sujungia .btn ir .submit klases. Taip pat galite kurti stilius iš kito CSS modulio, pavyzdžiui:

.Pateikti {
 komponuoja: pirminis iš "./colors.css"
 fono spalva: žalia;
}

Atminkite, kad kūrimo taisyklę turite parašyti prieš kitas taisykles.

Kaip naudoti CSS modulius „React“.

Kaip naudojate CSS modulius React, priklauso nuo to, kaip kuriate React programą.

Jei naudojate programą kurti-reaguoti, CSS moduliai nustatomi iš karto. Tačiau, jei ketinate kurti programą nuo nulio, turėsite sukonfigūruoti CSS modulius naudodami kompiliatorių, pvz., Webpack.

Jei norite tęsti šią mokymo programą, turite turėti:

  • Jūsų kompiuteryje įdiegtas mazgas.
  • Pagrindinis ES6 modulių supratimas.
  • Pagrindinis supratimą apie React.

„React“ programos kūrimas

Kad viskas būtų paprasta, galite naudoti kurti-reaguoti-programėlę norėdami pastatyti React programėlę.

Vykdykite šią komandą sukurti naują React projektą vadinami react-css-moduliais:

npx sukurti-react-app react-css-modules

Tai sugeneruos naują failą, pavadintą react-css-modules su visomis priklausomybėmis, kurių reikia norint pradėti naudoti React.

Mygtuko komponento kūrimas

Šiame veiksme sukursite mygtuko komponentą ir CSS modulį pavadinimu Button.module.css. Aplanke src sukurkite naują aplanką pavadinimu Komponentai. Tame aplanke sukurkite kitą aplanką pavadinimu Mygtukas. Šiame aplanke pridėsite mygtuko komponentą ir jo stilius.

Eikite į src/Components/Button ir sukurti Button.js.

eksportuotinumatytasfunkcijaMygtukas() {
grąžinti (
<mygtuką>Pateikti</button>
 )
}

Tada sukurkite naują failą pavadinimu Button.module.css ir pridėkite toliau pateiktą informaciją.

.btn {
 plotis: 90 pikselių;
 aukštis: 40px;
 užpildymas: 10 piks. 20 piks.;
 kraštinės spindulys: 4 pikseliai;
 kraštinė: nėra;
}

Norėdami naudoti šią klasę mygtuko komponente, importuokite ją kaip stilius ir nurodykite ją mygtuko elemento klasės pavadinime taip:

importuoti stiliai iš "./Button.module.css"
eksportuotinumatytasfunkcijaMygtukas() {
grąžinti (
<mygtukas className={styles.btn}>Pateikti</button>
 )
}

Tai paprastas pavyzdys, rodantis, kaip naudoti vieną klasę. Galbūt norėsite bendrinti skirtingų komponentų stilius arba net sujungti klases. Norėdami tai padaryti, galite naudoti raktinį žodį kompozicija, kaip minėta šiame straipsnyje.

Naudojant kompoziciją

Pirmiausia pakeiskite mygtuko komponentą naudodami šį kodą.

importuoti stiliai iš "./Button.module.css"
eksportuotinumatytasfunkcijaMygtukas({type="primary", label="Button"}) {
grąžinti (
<mygtukas className={styles[type]}>{label}</button>
 )
}

Šis kodas daro mygtuko komponentą dinamiškesnį, priimdamas tipo reikšmę kaip rekvizitus. Šis tipas nustatys klasės pavadinimą, taikomą mygtuko elementui. Taigi, jei mygtukas yra pateikimo mygtukas, klasės pavadinimas bus „pateikti“. Jei tai „klaida“, klasės pavadinimas bus „error“ ir pan.

Jei norite naudoti raktinį žodį „Compos“, o ne rašyti visus kiekvieno mygtuko stilius nuo nulio, į Button.module.css pridėkite šiuos.

.btn {
 plotis: 90 pikselių;
 aukštis: 40px;
 užpildymas: 10 piks. 20 piks.;
 kraštinės spindulys: 4 pikseliai;
 kraštinė: nėra;
}
.pirminis {
 komponuoja: btn;
 spalva: #FFFFFF;
 fono spalva: #6E41E2;
}
.antrinis {
 komponuoja: btn;
 spalva: #6E41E2;
 fono spalva: #FFFFFF;
}

Šiame pavyzdyje pirminėje ir antrinėje klasėje naudojama btn klasė. Tai darydami sumažinate kodo, kurį turite parašyti, kiekį.

Tai galite padaryti dar toliau naudodami išorinį CSS modulį color.module.css, kuriame yra programoje naudotos spalvos. Tada galite naudoti šį modulį kituose moduliuose. Pavyzdžiui, aplanko Komponentai šaknyje sukurkite failą color.module.css su šiuo kodu:

.primaryBg {
 fono spalva: #6E41E2
}
.antrinisBg {
 fono spalva: #FFFFFF
}
.primaryColor {
 spalva: #FFFFFF
}
.antrinė spalva {
 spalva: #6E41E2
}

Dabar faile Button/Button.module.css pakeiskite pirmines ir antrines klases, kad naudotumėte aukščiau nurodytas klases, kaip nurodyta toliau:

.pirminis {
 komponuoja: btn;
 komponuoja: pirminėSpalva iš "../colors.module.css";
 sudaro: pirminisBg iš "../colors.module.css";
}
.antrinis {
 komponuoja: btn;
 komponuoja: antrinėSpalva iš "../colors.module.css";
 sudaro: antrinisBg iš "../colors.module.css";
}

Sass su CSS moduliais

Galite naudoti CSS modulius, kad pagerintumėte savo kodų bazės moduliškumą. Pavyzdžiui, galite sukurti paprastą CSS klasę mygtuko komponentui ir pakartotinai naudoti CSS klases per kompoziciją.

Norėdami sustiprinti CSS modulių naudojimą, naudokite Sass. „Sass“ – sintaksiškai nuostabūs stiliaus lapai – yra CSS pirminis procesorius, teikiantis daugybę funkcijų. Jie apima įdėjimo, kintamųjų ir paveldėjimo palaikymą, kurių nėra CSS. Naudodami „Sass“ savo programai galite pridėti sudėtingesnių funkcijų.