Ukaz composes za datoteke v CSS modulih v Reactu

Ukaz composes se lahko uporabi tudi za ponovno uporabo stilov iz ene datoteke v drugi.

Vrnimo se k aplikaciji buttons, ki smo jo izdelovali v prejšnjih lekcijah. Predpostavimo, da želimo vsem gumbom dodati enake sence, slog kazalca in krepko pisavo. Naj bodo ti slogi nameščeni v datoteki App.module.css. Odprimo to datoteko in na začetek dodajmo nov razred beauty s temi slogi:

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

Uporabimo ga za oblikovanje gumbov. Za to odprimo Buttons.module.css in spremenimo razred common-btn. Dodali bomo vrstico z ukazom composes, kjer bomo navedli ime razreda beauty, ki ga želimo uporabiti, in datoteke App.module.css, v kateri se nahaja ta razred:

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