A composes parancs CSS modulok fájljaiban Reactben

A composes parancs alkalmazható stílusok újrafelhasználására egy fájlból egy másikban is.

Térjünk vissza a buttons alkalmazáshoz, amelyet az előző leckékben készítettünk. Tegyük fel, hogy minden gombnak azonos árnyékot, kurzorstílust és vastag betűtípust akarunk adni. Legyenek ezek a stílusok a App.module.css fájlban elhelyezve. Nyissuk meg ezt a fájlt és adjunk hozzá az elején egy új beauty osztályt ezekkel a stílusokkal:

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

Alkalmazzuk ezt a gombok stílusozásához. Ehhez nyissuk meg a Buttons.module.css fájlt és végezzünk módosításokat a common-btn osztályban. Hozzáadunk egy sort a composes paranccsal, ahol megadjuk a beauty osztály nevét, amelyet alkalmazni szeretnénk, és a App.module.css fájlt, amelyben ez az osztály található:

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