Continuación del estudio de estilización con CSS modules en React

Continuemos trabajando en nuestra aplicación buttons. Ahora nos ocuparemos del componente principal App, que ya había sido generado en la carpeta src inicialmente. En él tendremos dos divs, un título y un botón.

Cambiemos el nombre del archivo App.css a App.module.css por convención, limpiémoslo y creemos en él varias clases con estilos CSS para las etiquetas:

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

Y ahora limpiemos el contenido del archivo App.js. Luego importemos el componente React Buttons y los estilos de App.module.css. Escribamos nuestras etiquetas y apliquémosles los estilos, y también coloquemos el 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;

Utilizamos la palabra classes para el nombre del objeto que contiene los estilos, que importamos de App.module.css. Como en el caso anterior, puedes nombrar este objeto como te resulte conveniente.

Quedan un par de pequeños pasos. Cambiemos el nombre del archivo index.css por convención a index.module.css y en el archivo index.js no olvidemos reemplazar la línea de importación:

import "./index.css";

Por la línea:

import "./index.module.css";

Ahora podemos ver en el navegador el resultado del trabajo de nuestra aplicación.

Si abres el código HTML generado en el panel de desarrollador del navegador, verás que cada componente tiene sus propias clases únicas generadas. De esta manera, ya no necesitamos preocuparnos por conflictos entre las clases de los distintos componentes.

También es importante que los módulos CSS no prohíben importar archivos CSS externos normales también.

Siguiendo la teoría de la lección, limpia el componente React App de tu aplicación inputs, que creaste en las tareas de la lección anterior, y también coloca en él, el Inputs creado por ti, en algún div estilizado. Añade en App un título estilizado. Todo esto colócalo dentro de otro div. Los estilos para las etiquetas del componente React App escríbelos en App.modules.css.

Junta todo, conecta correctamente los archivos restantes y ejecuta tu aplicación inputs.