React да CSS modules да файллар учун composes командаси

composes командасини бир файлдан стилларни бошқа файлда қайта ишлатиш учун ҳам қўллаш мумкин.

Олдинги дарсларда яратган buttons иловамизга қайтайлик. Фарз қилайлик, биз ҳамма тугмаларга бир хил соялар, курсор стили ва қалин шрифт қўшмоқчимиз. Ушбу стиллар App.module.css файлида joyлашсин. Келик, ушбу файлни ochамиз ва бошига ушбу стиллар билан янги beauty классини қўшамиз:

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

Келик уни тугмаларни стиллаш учун ишлатайлик. Бунинг учун Buttons.module.css ни ochамиз ва common-btn классига ўзгартириш киритамиз. Биз composes командаси билан сатр қўшамиз, бу ерда биз beauty классининг номини ва ушбу класси ўз ичига олган файлнинг App.module.css номини кўрсатамиз:

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