React-da CSS modullary bilen stil ýazmagy öwrenmäge başlamak

Bu we indiki sapaklarda, biz React komponentlerini stil ýazmak üçin ýene bir häzirki zaman we netijeli ýaklaşymy gözden geçireris - CSS modullaryny ulanmak.

CSS modullary bu ýaklaşymda - aýratyn derlenen CSS faýllarydyr, olarda klas we animasiýa atlary ýerli görnüş meýdanynda ýerleşýär, bu bolsa dürli komponentlerden gelen klas atlarynyň arasyndaky garşylyklaryň öňüni alýar.

Başlangyç üçin ýönekeý React aplikasiýamyzy buttons döredip, işledeli. Bunuň üçin boş test papkasyny dörediň, oňa giriň we terminalda aşakdaky buýruklary ýazyň:

npx create-react-app buttons
cd buttons
npm start

Eger React-ynyzyň täze wersiýasy bar bolsa, ýagny ol Create React App v2 we ýokarysyny goldasa, onda hiç hili goşmaça sazlamalary etmek zerur däldir, sebäbi bu ýagdaýda CSS modullary awtomatiki usulda goldanyljak. Barlamak üçin package.json-a serediň, eger react-scripts baglylygyňyzyň wersiýasy 2.x.x we ýokary bolsa, onda hemme zat gowy. Ýoksa React-ynyzy täzeläň.

CSS modullary usuly bilen stil ýazjak aplikasiýamyz üç sany düwmäni öz içine alar.

CSS faýllaryny şertnama laýyklykda aşakdaky ýaly atlandrarys: [name].module.css.

Geliň häzir src içinde components papkasyny dörediň, we oňa düwmelerimiz üçin CSS stilleri bilen Buttons.module.css faýlyny goşuň:

.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;
}

Şeýle hem components papkasynda, boş React komponent faýly Buttons.js dörediň, şol wagt döredilen App.js faýlyna eliňizi sürmäň, ona soňrak gararys!

Buttons.js-da hökman CSS stilleri faýlyny import ediň, we şol stilleri her bir düwmä class atributy arkaly ulanýň:

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;

Şuňa meňzeş, import edilýän stil obýekti üçin styles sözüni ulanmak hökman däldir, ony size amatly bolşy ýaly atlandyryp bilersiňiz.

Indiki sapakda aplikasiýamyzy tamamlarys.

Bu sapaga teoriýa laýyklykda React aplikasiýaňyzy inputs dörediň.

Sapakda görkezilen CSS modullary ýaklaşymyndan peýdalanyň. inputs aplikasiýasynyň src papkasynda React komponenti Inputs üçin Inputs.js faýlyny dörediň, ol üç sany inputy öz içine alar. Inputs.modules.css-da inputlar üçin birnäçe stil ýazyň. Bu faýly Inputs.js-a import ediň we stilleri ulanyň.