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

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

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 module ће садржати три дугмета.

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 модулима, приказан у часу. Направите у src апликације inputs фајл Inputs.js за React компоненту Inputs, која ће садржати три поља за унос. Напишите пар-три стила у Inputs.modules.css за поља за унос. Импортујте тај фајл у Inputs.js и примените стилове.