Бозомӯзии услуббахшӣ бо CSS modules дар React

Кори барномаи худ buttons-ро идома диҳем. Ҳоло ба компоненти асосӣ App пардохт мекунем, ки аллакай дар феҳристи src дар аввал сохта шуда буд. Дар он ду див, сарлавҳа ва як тугма хоҳем дошт.

Номи файли App.css-ро ба App.module.css мувофиқи созиш иваз мекунем, ҳама чизро аз он тоза мекунем ва дар он чанд синф бо услубҳои CSS барои тегҳо месозем:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

Ва ҳоло мундариҷаи файли App.js-ро тоза мекунем. Сипас компоненти React Buttons ва услубҳоро аз App.module.css ворид мекунем. Тегҳои худро менависем ва ба онҳо услубҳоро мегузорем, инчунин компоненти React Buttons-ро ҷойгир мекунем:

import classes from "./App.module.css";
import Buttons from "./components/Buttons";

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Мо калимаи classes барои номи объект, ки услубҳоро дар бар мегирад, истифода кардем, ки мо аз App.module.css ворид мекунем. Ҳамчунон дар ҳолати қаблӣ, шумо метавонед ин объектро ҳар гуна ки бароятон мусоид аст номгузорӣ кунед.

Якчанд қадами хурд боқӣ мондааст. Номи файли index.css-ро мувофиқи созиш ба index.module.css иваз мекунем ва дар файли index.js сатри воридотро иваз карданро фаромӯш накунем:

import "./index.css";

Ба сатр:

import "./index.module.css";

Ҳоло мо метавонем дар браузер натиҷаи кори барномаи худро бубинем.

Агар шумо верстаи сохташударо дар панели барномасоз дар браузер кушоед, шумо мебинед, ки ба ҳар як компонент синфҳои ягонаи худ таъйин шудаанд. Ҳамин тавр, мо дигар ниёҳ ба низаъҳои байни синфҳои ҷудогонаи компонентҳо надорем.

Як чизи дигари муҳим ин аст, ки CSS modules монеъи ворид кардани файлҳои оддии берунаи CSS низ нестанд.

Ба таври назария дар дарс, компоненти React App-и барномаи худро inputs, ки шумо дар вазифаҳои дарси гузашта сохта будед, тоза кунед, инчунин гузоред дар он, аз ҷониби шумо сохташуда, Inputs-ро ба як диви услуббахшишуда. Ба App сарлавҳаи услуббахшида илова кунед. Ҳамаи инро ба як диви дигар ҷойгир кунед. Услубҳо барои тегҳои компоненти React App дар App.modules.css нависед.

Ҳама чизро якҷоя гиред, дуруст пайваст кардани файлҳои боқимонда ва барномаи худро inputs оғоз кунед.