Começando a estudar estilização com CSS modules no React

Nesta e nas próximas lições, vamos considerar outra abordagem moderna e eficiente para estilizar componentes React - o uso de CSS modules.

CSS modules nesta abordagem são arquivos CSS compilados separados, nos quais os nomes das classes e animações estão no escopo local, o que evita conflitos entre nomes de classes de diferentes componentes.

Para começar, vamos criar e executar nossa pequena aplicação React buttons. Para isso, vamos criar uma pasta vazia test, entrar nela e no terminal escrever os seguintes comandos:

npx create-react-app buttons
cd buttons
npm start

Se você tem uma versão recente do React, ou seja, ela suporta Create React App v2 ou superior, então nenhuma configuração adicional precisa ser feita, pois neste caso os CSS modules serão suportados automaticamente. Para verificar, olhe no package.json, se a dependência react-scripts for da versão 2.x.x ou superior, está tudo em ordem. Cas contrário, atualize seu React.

Nossa aplicação para estilização usando o método CSS modules conterá três botões.

Vamos nomear os arquivos CSS, seguindo a convenção, da seguinte forma: [name].module.css.

Vamos agora criar a pasta components em src, e adicionar nela o arquivo Buttons.module.css com os estilos CSS para os nossos botões:

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

Também na pasta components, vamos criar o arquivo vazio do componente React Buttons.js, e por enquanto não mexa no arquivo gerado App.js, vamos lidar com ele mais tarde!

Em Buttons.js, importe obrigatoriamente o arquivo com os estilos CSS, e também aplique esses estilos a cada botão usando o atributo class:

import styles from "./Buttons.module.css"; 

const Buttons = () => (
	<>
		<button class={styles.btn1}>btn1</button>
		<button class={styles.btn2}>btn2</button>
		<button class={styles.btn3}>btn3</button>
	</>
);

export default Buttons;

A propósito, não é obrigatório usar a palavra styles para o nome do objeto importado de estilos, você pode nomeá-lo como achar melhor.

Na próxima lição, vamos finalizar nossa aplicação.

Seguindo a teoria desta lição, gere a aplicação React inputs.

Use a abordagem de CSS modules fornecida na lição. Crie em src da aplicação inputs o arquivo Inputs.js para o componente React Inputs, que conterá três inputs. Escreva alguns estilos no Inputs.modules.css para os inputs. Importe este arquivo em Inputs.js e aplique os estilos.