CSS modullari ilə React-da stil verməni öyrənməyə davam

Gəlin buttons tətbiqimiz üzərində işimizi davam etdirək. İndi əsas diqqəti App komponentinə yönəldəcəyik, hansı ki, əvvəlcədən src qovluğunda yaradılıb. Orada iki div, başlıq və düymə olacaq.

Razılaşmaya uyğun olaraq App.css faylının adını App.module.css olaraq dəyişirik, onu təmizləyirik və içərisində teqlər üçün bir neçə CSS stil sinfi yaradırıq:

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

İndi isə App.js faylının məzmununu təmizləyirik. Sonra React komponenti Buttons və stil faylı App.module.css import edirik. Teqlərimizi yazırıq ve onlara stilləri tətbiq edirik, həmçinin React komponenti Buttons yerləşdiririk:

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 faylından import etdiyimiz stilləri ehtiva edən obyektin adı üçün classes sözündən istifadə etdik. Əvvəlki halda olduğu kimi, bu obyekti istədiyiniz kimi adlandıra bilərsiniz.

Cəmi bir neçə kiçik addım qalıb. Razılaşmaya uyğun olaraq index.css faylının adını index.module.css olaraq dəyişirik və index.js faylında import sətrini dəyişdirməyi unutmuruq:

import "./index.css";

Bu sətrə:

import "./index.module.css";

İndi brauzerdə tətbiqimizin işləmə nəticəsini görə bilərik.

Əgər brauzerin developer panelində yaradılmış verilmiş quruluşa baxsanız, görəcəksiniz ki, hər bir komponentin öz unikal sinifləri yaranıb. Beləliklə, artıq ayrı-ayrı komponentlərin sinifləri arasında toqquşmalardan narahat olmağa ehtiyac yoxdur.

Əhəmiyyətlidir ki, CSS modulları adi xarici CSS fayllarını import etməyi qadağan etmir.

Dərsdəki nəzəriyyəyə uyğun olaraq, əvvəlki dərsin tapşırıqlarında yaratdığınız inputs tətbiqinizin React komponenti App-i təmizləyin və içərisində yaratdığınız Inputs komponentini hansısa stilləşdirilmiş div-də yerləşdirin. App-ə stilləşdirilmiş başlıq əlavə edin. Bütün bunları başqa bir div-in içinə qoyun. React komponenti App-in teqləri üçün stilləri App.modules.css faylında yazın.

Hamısını birlikdə yığın, qalan faylları düzgün qoşun və inputs tətbiqinizi işə salın.