Los módulos CSS proporcionan una forma de definir localmente los nombres de las clases CSS. No tiene que preocuparse por anular estilos cuando usa el mismo nombre de clase.

Descubra cómo funcionan los módulos CSS, por qué debería usarlos y cómo implementarlos en un proyecto de React.

¿Qué son los módulos CSS?

los documentos de módulos CSS describir un módulo CSS como un archivo CSS cuyos nombres de clase tienen un alcance local predeterminado. Esto significa que puede abordar variables CSS con el mismo nombre en diferentes archivos CSS.

Escribes clases de módulos CSS como clases normales. Luego, el compilador genera nombres de clase únicos antes de enviar el CSS al navegador.

Por ejemplo, considere la siguiente clase .btn en un archivo llamado estilos.modules.css:

.btn {
 ancho: 90px;
 altura: 40px;
 relleno: 10px 20px;
}

Para usar este archivo, debe importarlo a un archivo JavaScript.

importar estilos de "./estilos.módulo.js"

Ahora, para hacer referencia a la clase .btn y hacerla disponible en un elemento, usaría la clase como se muestra a continuación:

instagram viewer 
clase="estilos.btn"

El proceso de compilación reemplazará la clase CSS con un nombre único del formato como _estilos__btn_118346908.

La unicidad de los nombres de clase significa que, incluso si usa el mismo nombre de clase para diferentes componentes, no colisionarán. Puede garantizar una mayor independencia del código ya que puede almacenar los estilos CSS de un componente en un solo archivo, específico para ese componente.

Esto simplifica la depuración, especialmente si está trabajando con varias hojas de estilo. Solo necesitará rastrear el módulo CSS para un componente en particular.

Los módulos CSS también le permiten combinar múltiples clases a través del compone palabra clave. Por ejemplo, considere la siguiente clase .btn anterior. Puede "extender" esa clase en otras clases usando composiciones.

Para un botón de envío, podría tener:

.btn {
/* estilos */
}
.enviar {
 compone: btn;
 color de fondo: verde;
 color:#FFFFFF
}

Esto combina las clases .btn y .submit. También puede componer estilos desde otro módulo CSS como este:

.enviar {
 compone: primario de "./colores.css"
 color de fondo: verde;
}

Tenga en cuenta que debe escribir la regla de composición antes que otras reglas.

Cómo usar módulos CSS en React

La forma en que usa los módulos CSS en React depende de cómo cree la aplicación React.

Si usa create-react-app, los módulos CSS se configuran de forma inmediata. Sin embargo, si va a crear la aplicación desde cero, deberá configurar los módulos CSS con un compilador como webpack.

Para seguir este tutorial, debe tener:

  • Nodo instalado en su máquina.
  • Una comprensión básica de los módulos ES6.
  • Un basico entendimiento de reaccionar.

Creación de una aplicación de reacción

Para simplificar las cosas, puede utilizar crear-reaccionar-app para montar una aplicación React.

Ejecute este comando para crear un nuevo proyecto React llamado reaccionar-css-módulos:

npx crear-react-app reaccionar-css-módulos

Esto generará un nuevo archivo llamado react-css-modules con todas las dependencias necesarias para comenzar con React.

Creación de un componente de botón

Creará un componente Button y un módulo CSS llamado Button.module.css en este paso. En la carpeta src, cree una nueva carpeta llamada Componentes. En esa carpeta crea otra carpeta llamada Button. Agregará el componente Botón y sus estilos en esta carpeta.

Navegar a src/Componentes/Botón y crea Button.js.

exportardefectofunciónBotón() {
devolver (
<botón>Enviar</button>
 )
}

A continuación, cree un nuevo archivo llamado Button.module.css y agregue lo siguiente.

.btn {
 ancho: 90px;
 altura: 40px;
 relleno: 10px 20px;
 borde-radio: 4px;
 borde: ninguno;
}

Para usar esta clase en el componente Botón, impórtelo como estilos y haga referencia a él en el nombre de la clase del elemento del botón de esta manera:

importar estilos de "./Botón.módulo.css"
exportardefectofunciónBotón() {
devolver (
<botón className={estilos.btn}>Enviar</button>
 )
}

Este es un ejemplo simple que muestra cómo usar una sola clase. Es posible que desee compartir estilos entre diferentes componentes o incluso combinar clases. Para esto, puede usar la palabra clave redact como se mencionó anteriormente en este artículo.

Usando la composición

Primero, modifique el componente Botón con el siguiente código.

importar estilos de "./Botón.módulo.css"
exportardefectofunciónBotón({tipo="principal", etiqueta="Botón"}) {
devolver (
<botón className={estilos[tipo]}>{etiqueta}</button>
 )
}

Este código hace que el componente Botón sea más dinámico al aceptar un valor de tipo como accesorio. Este tipo determinará el nombre de clase aplicado al elemento de botón. Entonces, si el botón es un botón de envío, el nombre de la clase será "enviar". Si es "error", el nombre de la clase será "error", y así sucesivamente.

Para utilizar la palabra clave composes en lugar de escribir todos los estilos para cada botón desde cero, agregue lo siguiente a Button.module.css.

.btn {
 ancho: 90px;
 altura: 40px;
 relleno: 10px 20px;
 borde-radio: 4px;
 borde: ninguno;
}
.primario {
 compone: btn;
 color: #FFFFFF;
 color de fondo: #6E41E2;
}
.secundario {
 compone: btn;
 color: #6E41E2;
 color de fondo: #FFFFFF;
}

En este ejemplo, la clase principal y la clase secundaria utilizan la clase btn. Al hacer esto, reduce la cantidad de código que necesita escribir.

Puedes llevar esto aún más lejos con un módulo CSS externo llamado colores.módulo.css, que contiene los colores utilizados en la aplicación. Luego podría usar este módulo en otros módulos. Por ejemplo, cree el archivo colors.module.css en la raíz de la carpeta Componentes con el siguiente código:

.primaryBg {
 color de fondo: #6E41E2
}
.secundarioBg {
 color de fondo: #FFFFFF
}
.color primario {
 color: #FFFFFF
}
.color secundario {
 color: #6E41E2
}

Ahora, en el archivo Button/Button.module.css, modifique las clases primaria y secundaria para usar las clases anteriores de esta manera:

.primario {
 compone: btn;
 compone: color primario de "../colores.module.css";
 compone: PrimaryBg de "../colores.module.css";
}
.secundario {
 compone: btn;
 compone: color secundario de "../colores.module.css";
 compone: secondBg de "../colores.module.css";
}

Sass con módulos CSS

Puede usar módulos CSS para mejorar la modularidad de su base de código. Como ejemplo, puede crear una clase CSS simple para un componente de botón y reutilizar clases CSS a través de la composición.

Para potenciar su uso de módulos CSS, use Sass. Sass, hojas de estilo sintácticamente impresionantes, es un preprocesador de CSS que proporciona un montón de funciones. Incluyen soporte para anidamiento, variables y herencia que no están disponibles en CSS. Con Sass, puede agregar características más complejas a su aplicación.