Ako upraviť štýl komponentov React pomocou modulov CSS

Ako upraviť štýl komponentov React pomocou modulov CSS

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.

Predstavte si napríklad nasledujúcu triedu .btn v súbore s názvom styles.modules.css:



.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

import styles from "./styles.module.js"

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



class="styles.btn"

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

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.



okná nerozpoznávajú externý pevný disk

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

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

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

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.

môj ovládač xbox one sa nezapne

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

npx create-react-app react-css-modules

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.

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

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

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

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:

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

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <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. Ak je teda 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 { 
    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 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 { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

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

.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 modulmi CSS

Moduly CSS môžete použiť na zlepšenie modularity vašej kódovej základne. Ako príklad môžete 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.