Reactда CSS modules орқали стиллашни ўрганишни бошлаш

Ушбу ва клюingи дарсларда, биз 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.

Ҳозир src ичида components папкасини яратамиз, унга эса бизнинг тақинчкалар учун CSS стиллари билан Buttons.module.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 ёндашувидан фойдаланинг. inputs иловасининг src папкасида React компоненти Inputs учун Inputs.js файлини яратинг, у учта инпутни ўз ичига олади. Инпутларга бир-жафт стилларни Inputs.modules.css файлида ёзинг. Бу файлни Inputs.js файлига импорт қилинг ва стилларни қўлланг.