Začetek študija stilizacije s CSS moduli v Reactu

V tej in naslednjih lekcijah bomo obravnavali še en sodoben in učinkovit pristop k stilizaciji React komponent - uporabo CSS modulov.

CSS moduli v tem pristopu so ločene prevedene CSS datoteke, v katerih so imena razredov in animacij v lokalnem obsegu vidnosti, kar preprečuje konflikte med imeni razredov iz različnih komponent.

Za začetek bomo ustvarili in zagnali našo preprosto React aplikacijo buttons. Za to bomo ustvarili prazno mapo test, šli vanjo in v terminalu napisali naslednje ukaze:

terminalnpx create-react-app buttons
cd buttons
npm start

Če imate novo različico Reacta, to pomeni, da podpira Create React App v2 ali novejšo, potem ni potrebno nobenih dodatnih nastavitev, saj bodo v tem primeru CSS moduli podprti samodejno. Za preverjanje poglejte v package.json, če je odvisnost react-scripts različice 2.x.x ali višje, potem je vse v redu. Sicer posodobite vaš React.

Naša aplikacija za stilizacijo na način CSS modulov bo vsebovala tri gumbe.

CSS datoteke bomo poimenovali po dogovoru na naslednji način: [name].module.css.

Ustvarimo zdaj mapo components v src, in vanjo dodajmo datoteko Buttons.module.css s CSS slogi za naše gumbe:

Buttons.module.css.btn1 {
  background-color: orange;
  border: 2px solid brown;
  color: white;
}

.btn2 {
  background-color: red;
  border: 2px solid green;
  color: yellow;
}

.btn3 {
  background-color: brown;
  border: 2px solid yellowgreen;
  color: orange;
}

Prav tako v mapi components ustvarimo prazno datoteko React komponente Buttons.js, pri tem pa za zdaj ne dotikajte se generirane datoteke App.js, z njo se bomo ukvarjali kasneje!

V Buttons.js nujno uvozimo datoteko s CSS slogi in uporabimo te sloge za vsak gumb z uporabo atributa class:

Buttons.jsimport styles from "./Buttons.module.css"; 

const Buttons = () => (
  <>
    <button class={styles.btn1}>btn1</button>
    <button class={styles.btn2}>btn2</button>
    <button class={styles.btn3}>btn3</button>
  </>
);

export default Buttons;

Mimogrede, ni obvezno uporabiti besede styles za ime uvoženega objekta s slogi, lahko ga poimenujete, kot vam je priročno.

V naslednji lekciji bomo zaključili našo aplikacijo.