Пачатак вывучэння стылізацыі з 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 і прымяніце стылі.