Moduly CSS poskytujú spôsob lokálneho rozsahu názvov tried CSS. Keď použijete rovnaký názov triedy, nemusíte sa obávať prepísania štýlov.

Zistite, ako moduly CSS fungujú, prečo by ste ich mali používať a ako ich implementovať do projektu React.

Čo sú moduly CSS?

The Dokumenty k modulom CSS opíšte modul CSS ako súbor CSS, ktorého názvy tried sú štandardne lokálne. To znamená, že môžete adresovať premenné CSS s rovnakým názvom v rôznych súboroch CSS.

Triedy modulov CSS píšete rovnako ako bežné triedy. Potom kompilátor vygeneruje jedinečné názvy tried pred odoslaním CSS do prehliadača.

Zvážte napríklad nasledujúcu triedu .btn v súbore s názvom styles.modules.css:

.btn {
 šírka: 90px;
 výška: 40px;
 výplň: 10px 20px;
}

Ak chcete použiť tento súbor, musíte ho importovať do súboru JavaScript.

importovať štýlov od "./styles.module.js"

Teraz, aby ste odkázali na triedu .btn a sprístupnili ju v prvku, použili by ste triedu, ako je uvedené nižšie:

trieda="styles.btn"

Proces zostavovania nahradí triedu CSS jedinečným názvom formátu, ako je _styles__btn_118346908.

instagram viewer

Jedinečnosť názvov tried znamená, že aj keď použijete rovnaký názov triedy pre rôzne komponenty, nebudú kolidovať. Môžete zaručiť väčšiu nezávislosť kódu, pretože štýly CSS komponentu môžete uložiť do jedného súboru špecifického pre daný komponent.

To zjednodušuje ladenie, najmä ak pracujete s viacerými šablónami štýlov. Budete musieť iba sledovať modul CSS pre konkrétny komponent.

Moduly CSS tiež umožňujú kombinovať viacero tried prostredníctvom skladá kľúčové slovo. Zvážte napríklad nasledujúcu triedu .btn vyššie. Túto triedu by ste mohli „rozšíriť“ o ďalšie triedy pomocou skladieb.

Pre tlačidlo odoslania môžete mať:

.btn {
/* štýly */
}
.Predložiť {
 skladá: btn;
 farba pozadia: zelená;
 farba:#FFFFFF
}

Toto kombinuje triedy .btn a .submit. Môžete tiež vytvárať štýly z iného modulu CSS, ako je tento:

.Predložiť {
 skladá: primárny z "./colors.css"
 farba pozadia: zelená;
}

Všimnite si, že pravidlo skladania musíte napísať pred ostatnými pravidlami.

Ako používať moduly CSS v Reacte

Spôsob použitia modulov CSS v React závisí od toho, ako vytvoríte aplikáciu React.

Ak používate aplikáciu create-react-app, moduly CSS sú nastavené hneď po vybalení. Ak sa však chystáte vytvoriť aplikáciu od začiatku, budete musieť nakonfigurovať moduly CSS pomocou kompilátora, akým je napríklad webpack.

Ak chcete pokračovať v tomto návode, mali by ste mať:

  • Uzol nainštalovaný na vašom počítači.
  • Základné pochopenie modulov ES6.
  • Základné pochopenie Reactu.

Vytvorenie aplikácie React

Ak chcete veci zjednodušiť, môžete použiť create-react-app na lešenie aplikácie React.

Spustite tento príkaz vytvoriť nový projekt React nazývané respond-css-moduly:

npx vytvoriť-react-app moduly reakcie-css

Tým sa vygeneruje nový súbor s názvom React-css-modules so všetkými závislosťami potrebnými na spustenie Reactu.

Vytvorenie komponentu tlačidla

V tomto kroku vytvoríte komponent Button a modul CSS s názvom Button.module.css. V priečinku src vytvorte nový priečinok s názvom Components. V tomto priečinku vytvorte ďalší priečinok s názvom Button. Do tohto priečinka pridáte komponent Button a jeho štýly.

Prejdite na src/Components/Button a vytvorte Button.js.

exportpredvolenáfunkciuTlačidlo() {
vrátiť (
<tlačidlo>Predložiť</button>
 )
}

Ďalej vytvorte nový súbor s názvom Button.module.css a pridajte nasledujúce.

.btn {
 šírka: 90px;
 výška: 40px;
 výplň: 10px 20px;
 border-radius: 4px;
 hranica: žiadna;
}

Ak chcete použiť túto triedu v komponente Button, importujte ju ako štýly a uveďte na ňu odkaz v názve triedy prvku tlačidla takto:

importovať štýlov od "./Button.module.css"
exportpredvolenáfunkciuTlačidlo() {
vrátiť (
<button className={styles.btn}>Predložiť</button>
 )
}

Toto je jednoduchý príklad, ktorý ukazuje, ako používať jednu triedu. Možno budete chcieť zdieľať štýly medzi rôznymi komponentmi alebo dokonca kombinovať triedy. Na tento účel môžete použiť kľúčové slovo skladá, ako už bolo uvedené v tomto článku.

Použitie kompozície

Najprv upravte komponent Button s nasledujúcim kódom.

importovať štýlov od "./Button.module.css"
exportpredvolenáfunkciuTlačidlo({type="primary", label="Button"}) {
vrátiť (
<button className={styles[type]}>{label}</button>
 )
}

Tento kód robí komponent Button dynamickejším tým, že akceptuje hodnotu typu ako rekvizitu. Tento typ určí názov triedy aplikovaný na prvok tlačidla. Takže ak je tlačidlo tlačidlo odoslania, názov triedy bude „odoslať“. Ak je to „chyba“, názov triedy bude „chyba“ atď.

Ak chcete použiť kľúčové slovo composes namiesto písania všetkých štýlov pre každé tlačidlo od začiatku, pridajte nasledujúci do Button.module.css.

.btn {
 šírka: 90px;
 výška: 40px;
 výplň: 10px 20px;
 border-radius: 4px;
 hranica: žiadna;
}
.primárny {
 skladá: btn;
 farba: #FFFFFF;
 farba pozadia: #6E41E2;
}
.sekundárne {
 skladá: btn;
 farba: #6E41E2;
 farba pozadia: #FFFFFF;
}

V tomto príklade primárna trieda a sekundárna trieda využívajú triedu btn. Týmto spôsobom znížite množstvo kódu, ktorý musíte napísať.

Môžete to posunúť ešte ďalej pomocou externého modulu CSS s názvom farby.modul.css, obsahujúci farby použité v aplikácii. Tento modul by ste potom mohli použiť v iných moduloch. Vytvorte napríklad súbor colors.module.css v koreňovom adresári priečinka Components s nasledujúcim kódom:

.primaryBg {
 farba pozadia: #6E41E2
}
.sekundárnyBg {
 farba pozadia: #FFFFFF
}
.primaryColor {
 farba: #FFFFFF
}
.sekundárneFarba {
 farba: #6E41E2
}

Teraz v súbore Button/Button.module.css upravte primárne a sekundárne triedy tak, aby používali vyššie uvedené triedy:

.primárny {
 skladá: btn;
 skladá: primárnaFarba z "../colors.module.css";
 skladá: primárneBg z "../colors.module.css";
}
.sekundárne {
 skladá: btn;
 skladá: sekundárneFarba z "../colors.module.css";
 skladá: sekundárnyBg z "../colors.module.css";
}

Sass s modulmi CSS

Moduly CSS môžete použiť na zlepšenie modularity vašej kódovej základne. Môžete napríklad vytvoriť jednoduchú triedu CSS pre komponent tlačidla a znova použiť triedy CSS prostredníctvom kompozície.

Ak chcete posilniť používanie modulov CSS, použite Sass. Sass – Syntactically Awesome Style Sheets – je predprocesor CSS, ktorý poskytuje množstvo funkcií. Zahŕňajú podporu pre vnorenie, premenné a dedičnosť, ktoré nie sú dostupné v CSS. Pomocou Sass môžete do svojej aplikácie pridať zložitejšie funkcie.