Comenzando a estudiar estilización con CSS modules en React

En esta y las siguientes lecciones, consideraremos otro enfoque moderno y eficiente para estilizar componentes React: el uso de módulos CSS.

Módulos CSS en este enfoque son archivos CSS compilados separados, en los cuales los nombres de clases y animaciones están en un ámbito local, lo que permite evitar conflictos entre nombres de clases de diferentes componentes.

Para comenzar, crearemos y ejecutaremos nuestra pequeña aplicación React buttons. Para esto crearemos una carpeta vacía test, entraremos en ella y en la terminal escribiremos los siguientes comandos:

npx create-react-app buttons
cd buttons
npm start

Si tienes una versión reciente de React, es decir, que es compatible con Create React App v2 y superior, no es necesario realizar configuraciones adicionales, ya que en este caso los módulos CSS serán compatibles automáticamente. Para verificar, echa un vistazo a package.json, si la dependencia react-scripts es versión 2.x.x o superior, entonces todo está en orden. De lo contrario, actualiza tu React.

Nuestra aplicación para estilizar mediante el método de módulos CSS contendrá tres botones.

Llamaremos a los archivos CSS, siguiendo la convención, de la siguiente manera: [nombre].module.css.

Ahora creemos la carpeta components en src, y agreguemos en ella el archivo Buttons.module.css con estilos CSS para nuestros botones:

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

También en la carpeta components, crearemos el archivo vacío del componente React Buttons.js, ¡y por ahora no toques el archivo generado App.js, lo abordaremos más tarde!

En Buttons.js importaremos obligatoriamente el archivo con estilos CSS, y también aplicaremos estos estilos a cada botón usando el 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;

Por cierto, no es obligatorio usar la palabra styles para el nombre del objeto importado con estilos, puedes nombrarlo como te sea conveniente.

En la siguiente lección terminaremos nuestra aplicación.

Siguiendo la teoría de esta lección, genera la aplicación React inputs.

Utiliza el enfoque de módulos CSS, proporcionado en la lección. Crea en src de la aplicación inputs el archivo Inputs.js para el componente React Inputs, que contendrá tres inputs. Escribe un par de estilos en Inputs.modules.css para los inputs. Importa este archivo en Inputs.js y aplica los estilos.