CSS-moodulid pakuvad võimalust CSS-klasside nimede lokaalseks ulatuseks. Kui kasutate sama klassinime, ei pea te muretsema stiilide alistamise pärast.
Siit saate teada, kuidas CSS-moodulid töötavad, miks peaksite neid kasutama ja kuidas neid Reacti projektis rakendada.
Mis on CSS-moodulid?
The CSS-i moodulite dokumendid kirjeldage CSS-moodulit CSS-failina, mille klassinimed on vaikimisi kohaliku ulatusega. See tähendab, et saate erinevates CSS-failides sama nimega CSS-i muutujaid adresseerida.
Kirjutate CSS-mooduli klasse nagu tavalisi klasse. Seejärel genereerib kompilaator enne CSS-i brauserisse saatmist ainulaadsed klassinimed.
Näiteks kaaluge järgmist .btn klassi failis nimega styles.modules.css:
.btn {
laius: 90 pikslit;
kõrgus: 40 pikslit;
polsterdus: 10px 20px;
}
Selle faili kasutamiseks peate selle importima JavaScripti faili.
importida stiilid alates "./styles.module.js"
Nüüd, et viidata .btn klassile ja teha see elemendis kättesaadavaks, kasutage klassi järgmiselt:
klass="stiilid.btn"
Koostamisprotsess asendab CSS-klassi unikaalse vormingunimega nagu _styles__btn_118346908.
Klassinimede unikaalsus tähendab, et isegi kui kasutate erinevate komponentide jaoks sama klassinime, ei põrka need kokku. Saate tagada suurema koodi sõltumatuse, kuna saate salvestada komponendi CSS-stiile ühes failis, mis on selle komponendi jaoks spetsiifiline.
See lihtsustab silumist, eriti kui töötate mitme stiilitabeliga. Peate leidma ainult konkreetse komponendi CSS-mooduli.
CSS-moodulid võimaldavad teil ühendada ka mitu klassi komponeerib märksõna. Näiteks vaadake ülaltoodud .btn klassi. Saate seda klassi "laiendada" teistes klassides, kasutades komponeerimisi.
Esitamisnupu jaoks võib teil olla:
.btn {
/* stiilid */
}
.Esita {
koostab: btn;
taustavärv: roheline;
värv:#FFFFFF
}
See ühendab klassid .btn ja .submit. Samuti saate stiile koostada mõnest teisest CSS-moodulist järgmiselt:
.Esita {
koostab: esmane alates "./colors.css"
taustavärv: roheline;
}
Pange tähele, et koostamisreegli peate kirjutama enne teisi reegleid.
Kuidas Reactis CSS-i mooduleid kasutada
See, kuidas te Reactis CSS-mooduleid kasutate, sõltub sellest, kuidas te Reacti rakenduse loote.
Kui kasutate rakendust loo-reageeri, seadistatakse CSS-moodulid juba karbist välja. Kui aga kavatsete rakendust nullist luua, peate CSS-moodulid konfigureerima kompilaatoriga, näiteks veebipaketiga.
Selle õpetuse järgimiseks peaks teil olema:
- Teie masinasse installitud sõlm.
- Algteadmised ES6 moodulitest.
- Põhiline Reacti mõistmine.
Reacti rakenduse loomine
Asjade lihtsaks muutmiseks võite kasutada loo-reageeri rakendus Reacti rakenduse tellinguteks.
Käivitage see käsk luua uus Reacti projekt nimetatakse react-css-mooduliteks:
npx luua-react-app react-css-moodulid
See loob uue faili nimega react-css-modules koos kõigi Reactiga alustamiseks vajalike sõltuvustega.
Nupukomponendi loomine
Selles etapis loote nupu komponendi ja CSS-mooduli nimega Button.module.css. Looge src-kaustas uus kaust nimega Komponendid. Looge selles kaustas teine kaust nimega Nupp. Lisate sellesse kausta nupu komponendi ja selle stiilid.
Navigeerige src/Components/Button ja looge Button.js.
eksportidavaikimisifunktsiooniNupp() {
tagasi (
<nuppu>Esita</button>
)
}
Järgmisena looge uus fail nimega Button.module.css ja lisage järgmine.
.btn {
laius: 90 pikslit;
kõrgus: 40 pikslit;
polsterdus: 10px 20px;
piiri raadius: 4 pikslit;
piir: puudub;
}
Selle klassi kasutamiseks nupu komponendis importige see stiilidena ja viidake sellele nupuelemendi klassinimes järgmiselt:
importida stiilid alates "./Button.module.css"
eksportidavaikimisifunktsiooniNupp() {
tagasi (
<nupp className={styles.btn}>Esita</button>
)
}
See on lihtne näide, mis näitab, kuidas kasutada ühte klassi. Võib-olla soovite jagada stiile erinevate komponentide vahel või isegi klasse kombineerida. Selleks võite kasutada märksõna koostab, nagu selles artiklis varem mainitud.
Kompositsiooni kasutamine
Esmalt muutke nupu komponenti järgmise koodiga.
importida stiilid alates "./Button.module.css"
eksportidavaikimisifunktsiooniNupp({type="primary", label="Button"}) {
tagasi (
<nupp className={styles[type]}>{label}</button>
)
}
See kood muudab nupu komponendi dünaamilisemaks, aktsepteerides rekvisiidina tüübiväärtust. See tüüp määrab nupu elemendile rakendatava klassi nime. Nii et kui nupp on esitamisnupp, on klassi nimi "esita". Kui see on "viga", on klassi nimi "error" ja nii edasi.
Koostamise märksõna kasutamiseks selle asemel, et kirjutada iga nupu jaoks kõik stiilid algusest peale, lisage failile Button.module.css järgmine.
.btn {
laius: 90 pikslit;
kõrgus: 40 pikslit;
polsterdus: 10px 20px;
piiri raadius: 4 pikslit;
piir: puudub;
}.esmane {
koostab: btn;
värv: #FFFFFF;
taustavärv: #6E41E2;
}
.sekundaarne {
koostab: btn;
värv: #6E41E2;
taustavärv: #FFFFFF;
}
Selles näites kasutavad alg- ja keskklass btn-klassi. Seda tehes vähendate kirjutatava koodi hulka.
Saate seda veelgi kaugemale viia välise CSS-mooduli nimega color.module.css, mis sisaldab rakenduses kasutatud värve. Seejärel saate seda moodulit kasutada teistes moodulites. Näiteks looge kausta Components juure fail color.module.css järgmise koodiga:
.primaryBg {
taustavärv: #6E41E2
}
.sekundaarneBg {
taustavärv: #FFFFFF
}
.primaryColor {
värv: #FFFFFF
}
.secondaryColor {
värv: #6E41E2
}
Nüüd muutke failis Button/Button.module.css põhi- ja sekundaarklasse, et kasutada ülaltoodud klasse järgmiselt:
.esmane {
koostab: btn;
komponeerib: esmaneVärv alates "../colors.module.css";
koostab: esmaneBg alates "../colors.module.css";
}
.sekundaarne {
koostab: btn;
koostab: sekundaarneVärv alates "../colors.module.css";
koostab: SecondaryBg from "../colors.module.css";
}
Sass CSS-i moodulitega
Koodibaasi modulaarsuse parandamiseks saate kasutada CSS-i mooduleid. Näiteks saate nupukomponendi jaoks luua lihtsa CSS-klassi ja kompositsiooni kaudu CSS-klasse uuesti kasutada.
CSS-moodulite kasutamise aktiveerimiseks kasutage Sassi. Sass – süntaktiliselt ägedad stiililehed – on CSS-i eelprotsessor, mis pakub palju funktsioone. Need hõlmavad pesastamise, muutujate ja pärimise tuge, mis pole CSS-is saadaval. Sassi abil saate oma rakendusele lisada keerukamaid funktsioone.
