La propiedad composes para clases en CSS modules en React

En esta lección consideraremos una técnica muy útil para reutilizar estilos CSS de una clase en otra en CSS modules.

Volvamos a la aplicación buttons, que hicimos en lecciones anteriores. Miremos el archivo 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;
}

Supongamos que queremos que todos los botones tengan el mismo redondeo y tamaño de fuente. Por supuesto, se podría repetir las mismas propiedades en cada clase. Pero gracias a la propiedad composes de CSS modules, actuaremos de otra manera.

Para empezar, crearemos otra clase, por ejemplo common-btn, en la que colocaremos estas propiedades comunes. Y para aplicar las propiedades de esta clase en otras, es necesario utilizar en ellas la sintaxis:

selector {
	composes: nombre de la clase;
}

Ahora el código de nuestro Buttons.module.css se verá así:

.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;
}

Tome su aplicación React inputs, que hizo en las tareas de lecciones anteriores. Añada para todos los campos de entrada un par de estilos CSS comunes con los mismos valores. Cree una clase adicional, en la que se escribirán estos estilos. Con la ayuda de composes replique éstos en todas las demás clases para los campos de entrada.