Kako stilizirati React komponente pomoću CSS modula

Kako stilizirati React komponente pomoću CSS modula

CSS moduli pružaju način lokalnog opsega naziva CSS klasa. Ne morate brinuti o nadjačavanju stilova kada koristite isto ime klase.





Saznajte kako CSS moduli rade, zašto biste ih trebali koristiti i kako ih implementirati u React projekt.



Što su CSS moduli?

The CSS moduli dokumenti opišite CSS modul kao CSS datoteku čiji su nazivi klasa prema zadanim postavkama lokalno ograničeni. To znači da možete adresirati CSS varijable s istim imenom u različitim CSS datotekama.





je li legalno preuzimati youtube videozapise

Klase CSS modula pišete baš kao i normalne klase. Zatim kompajler generira jedinstvena imena klasa prije slanja CSS-a pregledniku.

Na primjer, razmotrite sljedeću .btn klasu u datoteci pod nazivom styles.modules.css:



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

Da biste koristili ovu datoteku, morate je uvesti u JavaScript datoteku.

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

Sada, da referencirate .btn klasu i učinite je dostupnom u elementu, koristite klasu kao što je prikazano u nastavku:



class="styles.btn"

Proces izgradnje zamijenit će CSS klasu jedinstvenim nazivom formata poput _styles__btn_118346908.

Jedinstvenost naziva klasa znači da, čak i ako koristite isto ime klase za različite komponente, one se neće sudarati. Možete jamčiti veću neovisnost koda jer možete pohraniti CSS stilove komponente u jednu datoteku, specifičnu za tu komponentu.



To pojednostavljuje otklanjanje pogrešaka, osobito ako radite s više stilskih tablica. Samo ćete morati pronaći CSS modul za određenu komponentu.

CSS moduli vam također omogućuju kombiniranje više klasa putem komponira ključna riječ. Na primjer, razmotrite sljedeću .btn klasu iznad. Mogli biste 'proširiti' tu klasu u drugim klasama pomoću sastavljanja.

Za gumb za slanje mogli biste imati:

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

Ovo kombinira klase .btn i .submit. Također možete sastaviti stilove iz drugog CSS modula ovako:

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

Imajte na umu da morate napisati pravilo sastavljanja prije ostalih pravila.

Kako koristiti CSS module u Reactu

Kako koristite CSS module u Reactu ovisi o tome kako kreirate React aplikaciju.

Ako koristite aplikaciju create-react-app, CSS moduli postavljaju se odmah. Međutim, ako namjeravate kreirati aplikaciju od nule, morat ćete konfigurirati CSS module pomoću prevoditelja kao što je webpack.

Da biste pratili ovaj vodič, trebali biste imati:

  • Čvor instaliran na vašem računalu.
  • Osnovno razumijevanje ES6 modula.
  • Osnovna razumijevanje Reacta .

Izrada React aplikacije

Kako bi stvari bile jednostavne, možete koristiti kreiraj-reagiraj-aplikaciju za postavljanje React aplikacije.

Pokrenite ovu naredbu za izraditi novi React projekt nazvani react-css-moduli:

npx create-react-app react-css-modules

Ovo će generirati novu datoteku pod nazivom react-css-modules sa svim ovisnostima potrebnim za početak rada s Reactom.

Stvaranje komponente gumba

U ovom koraku izradit ćete komponentu Button i CSS modul pod nazivom Button.module.css. U mapi src stvorite novu mapu pod nazivom Komponente. U toj mapi stvorite drugu mapu pod nazivom Button. U ovu ćete mapu dodati komponentu Button i njezine stilove.

Idite do src/Komponente/Gumb i kreirajte Button.js.

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

Zatim stvorite novu datoteku pod nazivom Button.module.css i dodajte sljedeće.

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

Da biste koristili ovu klasu u komponenti Button, uvezite je kao stilove i referencirajte je u nazivu klase elementa gumba ovako:

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

Ovo je jednostavan primjer koji pokazuje kako koristiti jednu klasu. Možda ćete htjeti dijeliti stilove u različitim komponentama ili čak kombinirati klase. Za to možete koristiti ključnu riječ composes kao što je prethodno spomenuto u ovom članku.

aplikacije u kojima možete preuzeti glazbu

Korištenje kompozicije

Prvo izmijenite komponentu Button pomoću sljedećeg koda.

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

Ovaj kod čini komponentu Button dinamičnijom prihvaćanjem vrijednosti tipa kao prop. Ovaj tip će odrediti naziv klase primijenjen na element gumba. Dakle, ako je gumb gumb za slanje, naziv klase bit će 'pošalji'. Ako je 'greška', naziv klase će biti 'greška', i tako dalje.

Da biste upotrijebili ključnu riječ composes umjesto pisanja svih stilova za svaki gumb ispočetka, dodajte sljedeće u 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; 
}

U ovom primjeru, primarna klasa i sekundarna klasa koriste btn klasu. Na taj način smanjujete količinu koda koji trebate napisati.

Ovo možete učiniti čak i dalje s vanjskim CSS modulom pod nazivom boje.modul.css , koji sadrži boje korištene u aplikaciji. Zatim možete koristiti ovaj modul u drugim modulima. Na primjer, stvorite datoteku colors.module.css u korijenu mape Components sa sljedećim kodom:

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

Sada u datoteci Button/Button.module.css modificirajte primarnu i sekundarnu klasu da koriste gore navedene klase ovako:

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

Možete koristiti CSS module za poboljšanje modularnosti vaše baze kodova. Kao primjer, možete stvoriti jednostavnu CSS klasu za komponentu gumba i ponovno koristiti CSS klase kroz kompoziciju.

Da biste poboljšali svoju upotrebu CSS modula, koristite Sass. Sass—Syntactically Awesome Style Sheets—je CSS pretprocesor koji pruža gomilu značajki. Oni uključuju podršku za gniježđenje, varijable i nasljeđivanje koji nisu dostupni u CSS-u. Sa Sassom svojoj aplikaciji možete dodati složenije značajke.