Continuando o estudo de estilização com CSS Modules no React

Vamos continuar trabalhando em nossa aplicação buttons. Agora vamos nos concentrar no componente principal App, que foi gerado inicialmente na pasta src. Nele teremos duas divs, um título e um botão.

Vamos renomear o arquivo App.css para App.module.css por convenção, limpar seu conteúdo e criar nele algumas classes com estilos CSS para as tags:

.app {
	display: flex;
	flex-direction: column;
	width: 300px;
	border: 1px solid brown;
	padding: 10px;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.title {
	text-align: center;
	margin-top: 10px;
}

E agora vamos limpar o conteúdo do arquivo App.js. Em seguida, importaremos o componente React Buttons e os estilos de App.module.css. Vamos escrever nossas tags e aplicar os estilos a elas, e também posicionar o componente React Buttons:

import classes from "./App.module.css"; 
import Buttons from "./components/Buttons"; 

function App() {
	return (
		<div class={classes.app}>
			<h2 class={classes.title}>CSS Module Buttons</h2>
			<div class={classes.wrapper}>
				<Buttons />
			</div>
		</div>
	);
}
export default App;

Usamos a palavra classes para o nome do objeto que contém os estilos, que importamos de App.module.css. Como no caso anterior, você pode nomear esse objeto como achar melhor.

Faltam apenas alguns pequenos passos. Vamos mudar o nome do arquivo index.css por convenção para index.module.css e no arquivo index.js não vamos esquecer de substituir a linha de importação:

import "./index.css";

Pela linha:

import "./index.module.css";

Agora podemos ver no navegador o resultado do trabalho da nossa aplicação.

Se você abrir a marcação gerada no painel de desenvolvedor do navegador, verá que cada componente tem suas próprias classes únicas geradas. Dessa forma, não precisamos mais nos preocupar com conflitos entre as classes de componentes individuais.

É importante também que os CSS modules não proíbem a importação de arquivos CSS externos comuns.

Seguindo a teoria da lição, limpe o componente React App da sua aplicação inputs, que você criou nas tarefas da lição anterior, e também posicione nele o Inputs criado por você, dentro de uma div estilizada. Adicione ao App um título estilizado. Tudo isso coloque dentro de outra div. Escreva os estilos para as tags do componente React App em App.modules.css.

Junte tudo, conecte corretamente os arquivos restantes e inicie sua aplicação inputs.