CSS modullarinda sinifler ucun composes komandasi React-de

Bu dersde biz CSS modullarinda bir CSS sinfinin stillerini başqasında yenidən istifadə etmək üçün çox faydalı bir üsulu nəzərdən keçirəcəyik.

Keçən derslerde etdiyimiz buttons tətbiqinə qayıdaq. Buttons.module.css faylına nəzər salaq:

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

Tutaq ki, biz bütün düymələrin eyni yumruplaşdırılması və şrift ölçüsü olmasını istəyirik. Əlbəttə ki, hər bir sinifdə eyni xassələri təkrarlaya bilərdik. Lakin CSS modullarından olan composes komandası sayəsində, biz fərqli hərəkət edəcəyik.

Əvvəlcə, məsələn, common-btn kimi başqa bir sinif yaradıb, bu eyni xassələri ora yerləşdirəcəyik. Və bu sinifdən olan xassələri başqalarında tətbiq etmək üçün onlarda aşağıdakı sintaksisdən istifadə etmək lazımdır:

selektor {
	composes: sinifin adı;
}

İndi bizim Buttons.module.css faylımızın kodu belə görünəcək:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Keçən derslərin tapşırıqlarında etdiyiniz inputs React tətbiqinizi götürün. Bütün inputlar üçün bir neçə eyni CSS stilini eyni dəyərlərlə əlavə edin. Bu stillərin yazıldığı əlavə bir sinif yaradın. composes komandasından istifadə edərək, onları inputlar üçün olan bütün digər siniflərə yayın.