Начало на изучаване на стилизирането с 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 за името на импортирания обект със стилове, можете да го назовете, както ви е удобно.

В следващия урок ще завършим нашето приложение.