Reguła composes dla klas w CSS modules w React

W tej lekcji przyjrzymy się bardzo przydatnej metodzie na ponowne wykorzystanie stylów CSS jednej klasy w innej w CSS modules.

Wróćmy do aplikacji buttons, którą robiliśmy na poprzednich lekcjach. Spójrzmy na plik Buttons.module.css:

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

Załóżmy, że chcemy, aby wszystkie przyciski miały takie samo zaokrąglenie i rozmiar czcionki. Oczywiście, można by powielić te same właściwości w każdej klasie. Ale dzięki regule composes z CSS modules, będziemy postępować inaczej.

Na początku utwórzmy kolejną klasę, na przykład common-btn, do której umieścimy te wspólne właściwości. Aby zastosować właściwości z tej klasy w innych, należy użyć w nich składni:

cssselektor {
  composes: nazwa klasy;
}

Teraz kod naszego Buttons.module.css będzie wyglądać tak:

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