CSS modullari bilan React-da stillashni o'rganishni davom ettirish

Ilovamiz buttons ustida ishlashni davom ettiramiz. Endi asosiy App komponenti bilan shug'ullanamiz, u dastlab src papkasida yaratilgan edi. Unda ikkita div, sarlavha va tugma bo'ladi.

App.css fayl nomini kelishuvga ko'ra App.module.css ga o'zgartiramiz, uni tozalatamiz va ichiga bir nechta CSS uslubidagi klasslar yaratamiz:

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

Endi App.js fayli mazmunini tozalatamiz. Keyin Buttons React komponentini va App.module.css dan stillarni import qilamiz. Teqlarimizni yozamiz va ularga stillarni qo'llaymiz, shuningdek Buttons React komponentini joylashtiramiz:

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

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

Biz App.module.css dan import qilayotgan stil obyektining nomi uchun classes so'zidan foydalandik. Oldingi holatda bo'lgani kabi, siz bu obyektni o'zingizga qulay tarzda nomlashingiz mumkin.

Bir juft kichik qadam qoldi. index.css fayl nomini kelishuvga ko'ra index.module.css ga o'zgartiramiz va index.js faylida import qatorini almashtirishni unutmaymiz:

import "./index.css";

Quyidagi qatorga:

import "./index.module.css";

Endi biz brauzerdagi ilovamiz ishlash natijasini ko'rishimiz mumkin.

Agar siz brauzerning ishlab chiqish panelida yaratilgan verstkani ochsangiz, har bir komponentning o'ziga xos klasslari yaratilganligini ko'rasiz. Shunday qilib, endi biz alohida komponentlarning klasslari o'rtasidagi ziddiyatlar haqida qayg'urishimiz shart emas.

Shuningdek, muhim jihati shundaki, CSS modullari oddiy tashqi CSS fayllarini import qilishni taqiqlamaydi.

Darsdagi nazariyaga asoslanib, oldingi dars vazifalarida yaratgan inputs ilovangizning App React komponentini tozalang va uning ichida yaratgan Inputs komponentingizni biron bir uslublashtirilgan div ichiga joylashtiring. App ga uslublashtirilgan sarlavha qo'shing. Bularning hammasini yana biron bir div ichiga joylashtiring. App React komponenti teqlari uchun stillarni App.modules.css da yozing.

Hammasini birlashtiring, qolgan fayllarni to'g'ri ulang va inputs ilovangizni ishga tushiring.