Dyrektywa composes dla plików w CSS modules w React

Polecenie composes można również zastosować do ponownego wykorzystania stylów z jednego pliku w drugim.

Wróćmy do aplikacji buttons, którą robiliśmy w poprzednich lekcjach. Załóżmy, że chcemy dodać wszystkim przyciskom identyczne cienie, styl kursora i pogrubioną czcionkę. Niech te style będą zlokalizowane w pliku App.module.css. Otwórzmy ten plik i dodajmy na początku nową klasę beauty z tymi stylami:

App.module.css.beauty { 
  box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
  font-weight: bold;
  cursor: pointer;
}

Zastosujmy go do stylizacji przycisków. Aby to zrobić, otwórzmy Buttons.module.css i wprowadźmy zmiany w klasie common-btn. Dodamy wiersz z poleceniem composes, gdzie wskażemy nazwę klasy beauty, którą chcemy zastosować i pliku App.module.css, w którym znajduje się ta klasa:

Buttons.module.css.common-btn {
  composes: beauty from "../App.module.css"; 
  font-size: 16px;
  border-radius: 3px;
}