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:

Buttons.module.css.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:

cssselektor {
  composes: sinifin adı;
}

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

Buttons.module.css.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;
}