Kako stilizirati komponente React z moduli CSS

Kako stilizirati komponente React z moduli CSS

Moduli CSS omogočajo lokalno določanje obsega imen razredov CSS. Če uporabljate isto ime razreda, vam ni treba skrbeti za preglasitev slogov.





spletna mesta, ki vam brezplačno glasno berejo knjige

Ugotovite, kako delujejo moduli CSS, zakaj bi jih morali uporabljati in kako jih implementirati v projekt React.





Kaj so moduli CSS?

The Dokumenti modulov CSS opišite modul CSS kot datoteko CSS, katere imena razredov so privzeto lokalno omejena. To pomeni, da lahko naslavljate spremenljivke CSS z istim imenom v različnih datotekah CSS.





Razrede modulov CSS pišete tako kot običajne razrede. Nato prevajalnik ustvari edinstvena imena razredov, preden pošlje CSS v brskalnik.

Na primer, razmislite o naslednjem razredu .btn v datoteki, imenovani styles.modules.css:



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

Če želite uporabiti to datoteko, jo morate uvoziti v datoteko JavaScript.

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

Zdaj, če se želite sklicevati na razred .btn in ga dati na voljo v elementu, uporabite razred, kot je prikazano spodaj:





class="styles.btn" 

Postopek izdelave bo zamenjal razred CSS z edinstvenim imenom formata, kot je _styles__btn_118346908.

Edinstvenost imen razredov pomeni, da tudi če uporabite isto ime razreda za različne komponente, ne bodo trčili. Zagotovite lahko večjo neodvisnost kode, saj lahko sloge CSS komponente shranite v eno datoteko, specifično za to komponento.





To poenostavi odpravljanje napak, še posebej, če delate z več slogi. Izslediti boste morali samo modul CSS za določeno komponento.

Moduli CSS vam omogočajo tudi kombiniranje več razredov prek komponira ključna beseda. Na primer, upoštevajte zgornji razred .btn. Ta razred bi lahko 'razširili' v druge razrede z uporabo sestavljanj.

Za gumb za oddajo bi lahko imeli:

.btn { 
/* styles */
}

.submit {
composes: btn;
background-color: green;
color:#FFFFFF
}

To združuje razreda .btn in .submit. Sloge lahko sestavite tudi iz drugega modula CSS, kot je ta:

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

Upoštevajte, da morate pravilo za sestavljanje napisati pred drugimi pravili.

Kako uporabljati module CSS v Reactu

Kako uporabljate module CSS v Reactu, je odvisno od tega, kako ustvarite aplikacijo React.

Če uporabljate aplikacijo create-react-app, so moduli CSS nastavljeni takoj. Če pa boste aplikacijo ustvarili iz nič, boste morali module CSS konfigurirati s prevajalnikom, kot je webpack.

Če želite slediti tej vadnici, morate imeti:

  • Vozlišče, nameščeno na vašem računalniku.
  • Osnovno razumevanje modulov ES6.
  • Osnovna razumevanje Reacta .

Ustvarjanje aplikacije React

Če želite stvari poenostaviti, lahko uporabite create-react-aplikacija za gradnjo aplikacije React.

Zaženite ta ukaz za ustvarite nov projekt React imenovani react-css-moduli:

npx create-react-app react-css-modules 

To bo ustvarilo novo datoteko z imenom react-css-modules z vsemi odvisnostmi, potrebnimi za začetek uporabe React.

Ustvarjanje komponente gumba

V tem koraku boste ustvarili komponento Button in modul CSS z imenom Button.module.css. V mapi src ustvarite novo mapo z imenom Komponente. V tej mapi ustvarite drugo mapo z imenom Button. V to mapo boste dodali komponento Button in njene sloge.

Pomaknite se do src/Components/Button in ustvarite Button.js.

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

Nato ustvarite novo datoteko z imenom Button.module.css in dodajte naslednje.

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

Če želite uporabiti ta razred v komponenti Gumb, ga uvozite kot sloge in se nanj sklicujte v imenu razreda elementa gumba, kot je ta:

import styles from "./Button.module.css" 

export default function Button() {
return (
<button className={styles.btn}>Submit</button>
)
}

To je preprost primer, ki prikazuje, kako uporabiti en razred. Morda boste želeli deliti sloge med različnimi komponentami ali celo združiti razrede. Za to lahko uporabite ključno besedo composes, kot je bilo prej omenjeno v tem članku.

Uporaba kompozicije

Najprej spremenite komponento Button z naslednjo kodo.

import styles from "./Button.module.css" 

export default function Button({type="primary", label="Button"}) {
return (
<button className={styles[type]}>{label}</button>
)
}

Ta koda naredi komponento Button bolj dinamično, tako da sprejme vrednost tipa kot prop. Ta tip bo določil ime razreda, uporabljeno za element gumba. Torej, če je gumb gumb za oddajo, bo ime razreda 'oddaj'. Če je »napaka«, bo ime razreda »napaka« in tako naprej.

Če želite uporabiti ključno besedo composes namesto pisanja vseh slogov za vsak gumb iz nič, dodajte naslednje v 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 tem primeru primarni razred in sekundarni razred uporabljata razred btn. S tem zmanjšate količino kode, ki jo morate napisati.

To lahko naredite še dlje z zunanjim modulom CSS, imenovanim barve.modul.css , ki vsebuje barve, uporabljene v aplikaciji. Ta modul lahko nato uporabite v drugih modulih. Ustvarite na primer datoteko colors.module.css v korenu mape Komponente z naslednjo kodo:

.primaryBg { 
background-color: #6E41E2
}
.secondaryBg {
background-color: #FFFFFF
}

.primaryColor {
color: #FFFFFF
}
.secondaryColor {
color: #6E41E2
}

Zdaj v datoteki Button/Button.module.css spremenite primarni in sekundarni razred, da bosta uporabljala zgornje razrede takole:

.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 z moduli CSS

Z moduli CSS lahko izboljšate modularnost vaše kodne baze. Na primer, lahko ustvarite preprost razred CSS za komponento gumba in znova uporabite razrede CSS prek sestavljanja.

Za izboljšanje uporabe modulov CSS uporabite Sass. Sass – Syntactically Awesome Style Sheets – je predprocesor CSS, ki ponuja ogromno funkcij. Vključujejo podporo za gnezdenje, spremenljivke in dedovanje, ki niso na voljo v CSS. S Sassom lahko svoji aplikaciji dodate bolj zapletene funkcije.