A propriedade composes para classes em CSS modules no React

Nesta aula, vamos analisar uma técnica muito útil para reutilizar estilos CSS de uma classe em outra em CSS modules.

Vamos voltar para o aplicativo buttons que fizemos nas aulas anteriores. Vamos dar uma olhada no arquivo 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;
}

Suponha que queremos que todos os botões tenham o mesmo arredondamento e tamanho de fonte. Poderíamos, é claro, repetir as mesmas propriedades em cada classe. Mas, graças à propriedade composes do CSS modules, vamos agir de forma diferente.

Para começar, vamos criar outra classe, por exemplo common-btn, na qual colocaremos essas propriedades comuns. E para aplicar as propriedades dessa classe em outras, é preciso usar nelas a sintaxe:

seletor {
	composes: nome-da-classe;
}

Agora, o código do nosso Buttons.module.css ficará assim:

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

Pegue sua aplicação React inputs, que você fez nas tarefas das aulas anteriores. Adicione para todas as entradas (inputs) alguns estilos CSS iguais com os mesmos valores. Crie uma classe adicional onde esses estilos serão escritos. Com a ajuda da propriedade composes, aplique esses estilos em todas as outras classes para as entradas.