Пачатак вывучэння стылізацыі з CSS modules у React

У гэтым і наступных уроках, мы будзем разглядаць яшчэ адзін сучасны і эфектыўны падыход да стылізацыі React кампанентаў - выкарыстанне CSS modules.

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 modules будзе ўтрымліваць тры кнопачкі.

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 для імя імпартуемага аб'екта са стылямі, вы можаце назваць яго, як вам зручна.

У наступным уроку мы скончым наша прыкладанне.