Moduly CSS poskytují způsob místního rozsahu názvů tříd CSS. Když použijete stejný název třídy, nemusíte se starat o přepsání stylů.

Zjistěte, jak moduly CSS fungují, proč byste je měli používat a jak je implementovat do projektu React.

Co jsou moduly CSS?

The Dokumenty k modulům CSS popište modul CSS jako soubor CSS, jehož názvy tříd jsou ve výchozím nastavení lokálně vymezeny. To znamená, že můžete adresovat proměnné CSS se stejným názvem v různých souborech CSS.

Třídy modulů CSS píšete stejně jako normální třídy. Poté kompilátor vygeneruje jedinečné názvy tříd před odesláním CSS do prohlížeče.

Zvažte například následující třídu .btn v souboru s názvem styles.modules.css:

.btn {
 šířka: 90px;
 výška: 40px;
 odsazení: 10px 20px;
}

Chcete-li tento soubor použít, musíte jej importovat do souboru JavaScript.

import styly z "./styles.module.js"

Nyní, abyste odkazovali na třídu .btn a zpřístupnili ji v prvku, použijte třídu, jak je uvedeno níže:

třída="styles.btn"

Proces sestavení nahradí třídu CSS jedinečným názvem formátu, jako je _styles__btn_118346908.

instagram viewer

Jedinečnost názvů tříd znamená, že i když použijete stejný název třídy pro různé komponenty, nebudou kolidovat. Můžete zaručit větší nezávislost na kódu, protože styly CSS komponenty můžete uložit do jednoho souboru specifického pro tuto komponentu.

To zjednodušuje ladění, zejména pokud pracujete s více šablonami stylů. Budete potřebovat pouze sledovat modul CSS pro konkrétní komponentu.

Moduly CSS také umožňují kombinovat více tříd prostřednictvím skládá klíčové slovo. Zvažte například následující třídu .btn výše. Tuto třídu byste mohli „rozšířit“ o další třídy pomocí skládání.

Pro tlačítko Odeslat můžete mít:

.btn {
/* styly */
}
.Předložit {
 skládá: btn;
 barva pozadí: zelená;
 barva:#FFFFFF
}

To kombinuje třídy .btn a .submit. Styly můžete také skládat z jiného modulu CSS, jako je tento:

.Předložit {
 skládá: primární z "./colors.css"
 barva pozadí: zelená;
}

Pamatujte, že pravidlo skládání musíte napsat před ostatní pravidla.

Jak používat moduly CSS v Reactu

Způsob použití modulů CSS v Reactu závisí na tom, jak vytvoříte aplikaci React.

Pokud používáte create-react-app, moduly CSS jsou nastaveny ihned po vybalení. Pokud se však chystáte vytvořit aplikaci od začátku, budete muset nakonfigurovat moduly CSS pomocí kompilátoru, jako je webpack.

Chcete-li pokračovat v tomto tutoriálu, měli byste mít:

  • Uzel nainstalovaný na vašem počítači.
  • Základní pochopení modulů ES6.
  • Základní porozumění Reactu.

Vytvoření aplikace React

Chcete-li věci zjednodušit, můžete použít create-react-app k vytvoření lešení aplikace React.

Spusťte tento příkaz vytvořit nový projekt React s názvem reagovat-css-moduly:

npx vytvořit-react-app reagovat-css-moduly

Tím se vygeneruje nový soubor s názvem React-css-modules se všemi závislostmi, které jsou nutné k tomu, abyste mohli začít s Reactem.

Vytvoření komponenty tlačítka

V tomto kroku vytvoříte komponentu Button a modul CSS s názvem Button.module.css. Ve složce src vytvořte novou složku s názvem Components. V této složce vytvořte další složku s názvem Button. Do této složky přidáte komponentu Button a její styly.

Navigovat do src/Components/Button a vytvořte Button.js.

vývoznívýchozífunkceKnoflík() {
vrátit se (
<knoflík>Předložit</button>
 )
}

Dále vytvořte nový soubor s názvem Button.module.css a přidejte následující.

.btn {
 šířka: 90px;
 výška: 40px;
 odsazení: 10px 20px;
 border-radius: 4px;
 hranice: žádná;
}

Chcete-li použít tuto třídu v komponentě Button, importujte ji jako styly a odkazujte na ni v názvu třídy prvku tlačítka takto:

import styly z "./Button.module.css"
vývoznívýchozífunkceKnoflík() {
vrátit se (
<button className={styles.btn}>Předložit</button>
 )
}

Toto je jednoduchý příklad, který ukazuje, jak používat jednu třídu. Možná budete chtít sdílet styly mezi různými komponentami nebo dokonce kombinovat třídy. K tomu můžete použít klíčové slovo composes, jak již bylo zmíněno v tomto článku.

Použití kompozice

Nejprve upravte komponentu Button pomocí následujícího kódu.

import styly z "./Button.module.css"
vývoznívýchozífunkceKnoflík({type="primary", label="Button"}) {
vrátit se (
<button className={styles[type]}>{označení}</button>
 )
}

Tento kód dělá komponentu Button dynamičtější tím, že přijímá hodnotu typu jako podpěru. Tento typ určí název třídy aplikovaný na prvek tlačítka. Pokud je tedy tlačítko tlačítko pro odeslání, název třídy bude „odeslat“. Pokud je to „chyba“, název třídy bude „chyba“ a tak dále.

Chcete-li použít klíčové slovo composes místo psaní všech stylů pro každé tlačítko od začátku, přidejte do Button.module.css následující.

.btn {
 šířka: 90px;
 výška: 40px;
 odsazení: 10px 20px;
 border-radius: 4px;
 hranice: žádná;
}
.hlavní {
 skládá: btn;
 barva: #FFFFFF;
 barva pozadí: #6E41E2;
}
.sekundární {
 skládá: btn;
 barva: #6E41E2;
 barva pozadí: #FFFFFF;
}

V tomto příkladu primární třída a sekundární třída využívají třídu btn. Tímto způsobem snížíte množství kódu, který potřebujete napsat.

Můžete to posunout ještě dále pomocí externího modulu CSS s názvem barvy.modul.css, obsahující barvy použité v aplikaci. Tento modul pak můžete použít v jiných modulech. Vytvořte například soubor colors.module.css v kořenovém adresáři složky Components s následujícím kódem:

.primaryBg {
 barva pozadí: #6E41E2
}
.sekundárníBg {
 barva pozadí: #FFFFFF
}
.primaryColor {
 barva: #FFFFFF
}
.sekundární Barva {
 barva: #6E41E2
}

Nyní v souboru Button/Button.module.css upravte primární a sekundární třídy tak, aby používaly výše uvedené třídy:

.hlavní {
 skládá: btn;
 skládá: primární Barva z "../colors.module.css";
 skládá: primárníBg z "../colors.module.css";
}
.sekundární {
 skládá: btn;
 skládá: sekundárníBarva z "../colors.module.css";
 skládá: sekundárníBg z "../colors.module.css";
}

Sass s moduly CSS

Moduly CSS můžete použít ke zlepšení modularity vaší kódové základny. Jako příklad můžete vytvořit jednoduchou třídu CSS pro komponentu tlačítka a znovu použít třídy CSS prostřednictvím kompozice.

Chcete-li posílit používání modulů CSS, použijte Sass. Sass – Syntactically Awesome Style Sheets – je preprocesor CSS, který poskytuje spoustu funkcí. Zahrnují podporu pro vnoření, proměnné a dědičnost, které nejsou dostupné v CSS. Pomocí Sass můžete do své aplikace přidat složitější funkce.