Die composes-Anweisung für Klassen in CSS Modules in React

In dieser Lektion werden wir eine sehr nützliche Methode zur Wiederverwendung von CSS-Stilen einer Klasse in einer anderen in CSS Modules betrachten.

Kehren wir zur buttons-Anwendung zurück, die wir in den vorherigen Lektionen erstellt haben. Werfen wir einen Blick in die Datei Buttons.module.css:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Angenommen, wir möchten, dass alle Knöpfe die gleiche Abrundung und Schriftgröße haben. Man könnte natürlich in jeder Klasse die gleichen Eigenschaften hinzufügen. Aber dank der composes-Anweisung aus CSS Modules werden wir anders vorgehen.

Erstellen wir zunächst eine weitere Klasse, zum Beispiel common-btn, in die wir diese gemeinsamen Eigenschaften einfügen. Um die Eigenschaften aus dieser Klasse in anderen anzuwenden, muss in diesen die Syntax verwendet werden:

Selektor {
	composes: Klassenname;
}

Nun wird der Code unserer Buttons.module.css Datei so aussehen:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Nehmen Sie Ihre React-Anwendung inputs, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Fügen Sie für alle Eingabefelder ein paar gemeinsame CSS-Stile mit gleichen Werten hinzu. Erstellen Sie eine zusätzliche Klasse, in der diese Stile definiert sind. Verbreiten Sie mit Hilfe von composes diese Stile auf alle anderen Klassen für die Eingabefelder.