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:

.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:

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

Weź kod swojej aplikacji z zadania do poprzedniej lekcji i zrób jakikolwiek cień do twoich pól wprowadzania danych używając sposobu podanego w tej lekcji.