Cómo aplicar estilo a los componentes de React usando módulos CSS

Cómo aplicar estilo a los componentes de React usando módulos CSS

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.





cómo escribir un archivo por lotes

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 describe 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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
}

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

import styles from "./styles.module.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:



class="styles.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 { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
}

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

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
}

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 create-react-app react-css-modules

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 Botón. Agregará el componente Botón y sus estilos en esta carpeta.

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

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
}

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

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
}

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:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</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.

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</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 { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #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 { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
}

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

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.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 las 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 una gran cantidad 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.