Начало на изучаване на стилизирането с CSS modules в React

В този и следващите уроци, ние ще разгледаме още един модерен и ефективен подход към стилизирането на React компоненти - използването на CSS modules.

CSS модули в този подход са отделни компилирани CSS файлове, в които имената на класове и анимации са в локална област на видимост, което позволява избягване на конфликти между имена на класове от различни компоненти.

За начало ще създадем и стартираме нашето простичко React приложение buttons. За това ще създадем празна папка test, влезем в нея и в терминала напишем следните команди:

npx 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 стилове за нашите бутони:

.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:

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

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

Следвайки теорията към този урок генерирайте React приложение inputs.

Използвайте подхода CSS modules, даден в урока. Създайте в src на приложението inputs файл Inputs.js за React компонента Inputs, който ще съдържа три инпута. Напишете няколко стила в Inputs.modules.css за инпутите. Импортирайте този файл в Inputs.js и приложете стиловете.