Die composes-Anweisung für Dateien in CSS-Modulen in React

Die Anweisung composes kann auch angewendet werden, um Stile aus einer Datei in einer anderen wiederzuverwenden.

Kehren wir zur buttons-Anwendung zurück, die wir in vorherigen Lektionen erstellt haben. Nehmen wir an, wir möchten allen Knöpfen die gleichen Schatten, den gleichen Cursor-Stil und eine fette Schrift hinzufügen. Diese Stile sollen sich in der Datei App.module.css befinden. Öffnen wir diese Datei und fügen am Anfang eine neue Klasse beauty mit diesen Stilen hinzu:

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

Wenden wir sie nun zur Gestaltung der Knöpfe an. Dazu öffnen wir Buttons.module.css und nehmen Änderungen an der Klasse common-btn vor. Wir fügen eine Zeile mit der Anweisung composes hinzu, in der wir den Namen der Klasse beauty angeben, die wir anwenden möchten, sowie die Datei App.module.css, in der sich diese Klasse befindet:

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

Nehmen Sie den Code Ihrer Anwendung aus der Aufgabe der vorherigen Lektion und fügen Sie Ihren Inputs einen Schatten hinzu, indem Sie die in dieser Lektion beschriebene Methode verwenden.