Stilių taikymo su CSS moduliais React pradžia

Šioje ir kitose pamokose mes nagrinėsime dar vieną modernų ir veiksmingą požiūrį į React komponentų stilizavimą - CSS modulių naudojimą.

CSS moduliai šiame požiūryje - tai atskiri surinkti CSS failai, kuriuose klasių ir animacijų pavadinimai yra lokaliame vardų srityje, kas leidžia išvengti konfliktų tarp klasių pavadinimų iš skirtingų komponentų.

Pradžiai sukursime ir paleisime savo paprastą React programėlę buttons. Tam sukursime tuščią aplanką test, į jį įeisime ir terminale parašysime šias komandas:

terminalnpx create-react-app buttons
cd buttons
npm start

Jei jūsų React versija yra nauja, tai yra ji palaiko Create React App v2 ir aukštesnę, tai jokių papildomų nustatymų daryti nereikia, nes šiuo atveju CSS moduliai bus palaikomi automatiškai. Norėdami patikrinti, pažiūrėkite į package.json, jei priklausomybė react-scripts yra versijos 2.x.x ar aukštesnė, tai viskas tvarkoje. Kitu atveju atnaujinkite savo React.

Mūsų programa, skirta stilizavimui CSS modulių būdu, turės tris mygtukus.

CSS failus vadinsime, laikydamiesi susitarimo, taip: [name].module.css.

Dabar sukurkime aplanką components src, o į jį pridėkime failą Buttons.module.css su CSS stiliais mūsų mygtukams:

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

Taip pat aplanke components, sukurkime tuščią React komponento failą Buttons.js, kol kas nelieskite sugeneruoto failo App.js, juo mes užsiimsime vėliau!

Buttons.js būtinai importuokime failą su CSS stiliais, taip pat pritaikykime šiuos stilius kiekvienam mygtukui naudodami atributą 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;

Beje, nebūtina naudoti žodžio styles importuojamo objekto su stiliais pavadinimui, galite jį pavadinti, kaip jums patogiau.

Kitoje pamokoje mes užbaigsime savo programą.