Почетак учења стилизовања са CSS модулима у React-у

У овом и следећим часовима, ми ћемо размотрити још један савремени и ефикасан приступ стилизацији React компоненти - употребу CSS модула.

CSS модули у овом приступу су то одвојени компајлирани CSS фајлови, у којима су имена класа и анимација у локалном опсегу видљивости, што омогућава избегавање конфликта између имена класа из различитих компоненти.

За почетак ћемо направити и покренути нашу једноставну React апликацију buttons. За то ћемо направити празну фасциклу test, ући у њу и у терминалу написати следеће команде:

terminalnpx create-react-app buttons
cd buttons
npm start

Ако имате нову верзију React-а, тј. она подржава Create React App v2 и изнад, онда нема потребе да правите никакве додатне подешавања, јер у том случају ће CSS модули бити подржани аутоматски. За проверу погледајте у package.json, ако је зависност react-scripts верзије 2.x.x и изнад, онда је све у реду. У супротном ажурирајте ваш React.

Наша апликација за стилизацију начин са CSS module ће садржати три дугмета.

CSS фајлове ћемо називати, придржавајући се договора, на следећи начин: [name].module.css.

Хајде сада да направимо фасциклу components у src, а у њу додамо фајл Buttons.module.css са CSS стиловима за наша дугмад:

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

Такође у фасцикли components, направићемо празан фајл React компоненте Buttons.js, при томе за сада не дирајте генерисани фајл App.js, њим ћемо се позабавити касније!

У Buttons.js обавезно ћемо импортовати фајл са CSS стиловима, као и применити те стилове на свако дугме помоћу атрибута 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;

Узгред, није обавезно користити реч styles за име импортованог објекта са стиловима, можете га назвати, како вам је згодно.

У следећем часу ћемо завршити нашу апликацију.