Početak učenja stilizacije sa CSS modulima u Reactu

U ovoj i narednim lekcijama, mi ćemo razmotriti još jedan savremeni i efikasan pristup stilizaciji React komponenti - upotrebu CSS modula.

CSS moduli u ovom pristupu su odvojeni kompajlirani CSS fajlovi, u kojima imena klasa i animacija se nalaze u lokalnom opsegu vidljivosti, što omogućava izbegavanje sukoba između imena klasa iz različitih komponenti.

Za početak kreirajmo i pokrenimo našu jednostavnu React aplikaciju buttons. Za ovo kreirajmo praznu fasciklu test, uđimo u nju i u terminalu napišimo sledeće komande:

terminalnpx create-react-app buttons
cd buttons
npm start

Ako imate novu verziju React-a, to jest ona podržava Create React App v2 i više, onda ne treba raditi nikakva dodatna podešavanja, pošto će u tom slučaju CSS moduli biti podržani automatski. Za proveru pogledajte u package.json, ako je zavisnost react-scripts verzije 2.x.x i više, onda je sve u redu. U suprotnom ažurirajte vaš React.

Naša aplikacija za stilizaciju načinom CSS modula će sadržati tri dugmeta.

CSS fajlove ćemo nazivati, pridržavajući se dogovora, na sledeći način: [name].module.css.

Hajde sada da kreiramo fasciklu components u src, a u nju dodajmo fajl Buttons.module.css sa CSS stilovima za naša dugmad:

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;
}

Takođe u fascikli components, kreirajmo prazan fajl React komponente Buttons.js, pri čemu za sada ne dirajte generisani fajl App.js, bavićemo se njim kasnije!

U Buttons.js obavezno importujte fajl sa CSS stilovima, a takođe primenite te stilove na svako dugme pomoću 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;

Inače, nije obavezno koristiti reč styles za naziv importovanog objekta sa stilovima, možete ga nazvati, kako vam je zgodno.

U sledećoj lekciji završićemo našu aplikaciju.