Jak stylovat komponenty React pomocí modulů CSS

Jak stylovat komponenty React pomocí modulů CSS

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.





jak odpojit ovladač ps4 od ps4

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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

import styles from "./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:



class="styles.btn"

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

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 muset 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 { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

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

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

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:

komprimujte pdf mac bez ztráty kvality
  • 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 create-react-app react-css-modules

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.

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

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 styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</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.

jak ukládat videa na twitter 
import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #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 { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #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:

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../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.