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

Иловамиз buttons устидаги ишни давом эттирамиз. Энди бош App компоненти билан шуғулланамиз, у аввалдан src папкасида яратилган эди. Унда бизда икки див, сарлавҳа ва тугма бўлади.

App.css файл номини App.module.css га келишувга asosan ўзгартирамиз, уни тозалаймиз ва унинг ичида теглар учун 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;

Биз App.module.css дан импорт қилаётган стилларни ўз ичига олган объект номи учун classes сўзини ишлатдик. Аввалги холда бўлгани каби, сиз бу объектни ўзингизга қулай бўлган ном билан аташингиз мумкин.

Жуда оз қадам қолди. index.css файл номини келишувга asosan index.module.css га ўзгартирамиз ва index.js файлида импорт сатрини алмаштиришни унутмаймиз:

import "./index.css";

Бу сатрга:

import "./index.module.css";

Энди биз браузерда иловамизнинг ишлаш натижасини кўришимиз мумкин.

Агар сиз яратилган версткани браузер ишлаб чиқариш панелида очсангиз, ҳар бир компонент учун ўзига хос класслар яратилганини кўрасиз. Шу тариқа, бизнинг алоҳида компонентларнинг класслари ўртасидаги зидлик ҳақида қайғуришимиз шарт эмас.

Яна мухими, CSS modules оддий ташки CSS файлларни импорт қилишни тақиқламайди.

Дарс назариясига asosan, ўтингиз дарсдаги вазифаларда яратган inputs иловангизнинг React App компонентини тозаланг, ва унга яратган Inputs компонентингизни бирор стилланган див ича жойлаштиринг. App га стилланган сарлавҳа қўшинг. Ҳаммасини яна бирор див ича қўйинг. React App компоненти теглари учун стилларни App.modules.css да ёзинг.

Ҳаммасини тўғри йиғинг, қолган файлларни тўғри уланинг ва inputs иловангизни ишга туширинг.