Почеток на учењето со стилизирање со 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 и применете ги стиловите.