Príkaz composes pre súbory v CSS modules v React

Príkaz composes možno použiť aj na znovupoužitie štýlov z jedného súboru v druhom.

Vráťme sa k aplikácii buttons, ktorú sme robili v predchádzajúcich lekciách. Predpokladajme, že chceme pridať všetkým tlačidlá rovnaké tiene, štýl kurzora a tučné písmo. Nech sú tieto štýly umiestnené v súbore App.module.css. Otvorme tento súbor a pridajme na začiatok novú triedu beauty s týmito štýlmi:

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

Použime ju na štýlovanie tlačidiel. Preto otvorme Buttons.module.css a vykonajme zmeny v triede common-btn. Pridáme riadok s príkazom composes, kde uvedieme názov triedy beauty, ktorú chceme použiť a súboru App.module.css, v ktorom sa nachádza táto trieda:

Buttons.module.css.common-btn {
  composes: beauty from "../App.module.css"; 
  font-size: 16px;
  border-radius: 3px;
}
Задание 1

Vezmite kód vašej aplikácie z úlohy k predchádzajúcej lekcii a vytvorte nejaký tieň pre vaše vstupy použitím spôsobu uvedeného v tejto lekcii.