¿Conoces CSS Modules en React? Estilizar es una parte fundamental en cualquier proyecto de programación. En especial en el mundo del desarrollo web, donde no basta con que los objetos sean útiles, también tienen que ser diferentes y utilizables. Dar estilo a un elemento no solo nos da un sentido estético, también comunica claves al usuario sobre cómo se puede usar y guía su experiencia.
Por ello, existen muchas maneras de dar estilo con react module CSS. En este post, te enseñaremos qué son y cómo funcionan los CSS Modules en React, una de las formas que tiene esta librería para estilizar nuestras aplicaciones.
¿Qué son CSS Modules en React?
Los CSS Modules en React son una herramienta a la que tenemos acceso cuando creamos aplicaciones usando create-react-app. En realidad, podemos acceder a esta herramienta utilizando webpack de CSS Modules. Sin embargo, cuando creamos una aplicación CSS Modules usando create-react-app, esta herramienta se encarga de configurar webpack de manera interna para que podamos ejecutar muchas acciones. Como puedes leer en nuestro post sobre cargar CSS desde un componente React, webpack se encarga de facilitar la conexión entre archivos y dependencias.
Entonces, CSS Modules en React es una forma de aplicar estilos en los componentes de esta librería de JavaScript. Con webpack tenemos acceso no solo a CSS Modules, sino también a Sass y post-css, que son todas herramientas para estilizar nuestras aplicaciones de react module CSS.
Para conocer cómo trabajar con las distintas formas de estilizar que nos proporciona create-react-app, te sugerimos leer la sección de Styles and Assets en la página oficial de create-react-app-dev.
¿Cómo funcionan CSS Modules?
Como la práctica es la mejor enseñanza, para enseñarte cómo funcionan los CSS Modules, veremos un ejemplo. Los CSS Modules en React nos permiten establecer que, si tenemos un archivo que termina en la extensión module.css de react module CSS, podemos importar este archivo de estilos para aplicarlos en nuestro código JavaScript.
Entonces, supongamos que queremos estilizar un componente con el nombre de clase tweetsPage de CSS Modules. Para usar los CSS Modules en React, creamos un nuevo archivo que se titule TweetsPage.module.css. En este archivo podemos insertar cualquier propiedad de estilo CSS llamando al nombre de clase e insertando las propiedades en términos de clave:valor.
.tweetsPage {
color:green;
}
Entonces, como hemos creado un archivo con la extensión module, debemos importarlo en el archivo de nuestro componente de la siguiente manera:
import styles from ‘./TweetsPage.module.css’;
Nota que, a diferencia de cuando importamos un CSS directamente, debemos importar la palabra clave styles.
¿Qué nos da esta palabra clave? Veámoslo usando el comando console.log. Si escribes console.log (styles) y vas al inspector de tu navegador, verás que lo que recibimos es un objeto con la clase tweetsPage y un string. Este string se compone del nombre del archivo, el nombre de la clase y un código hash que lo identifica de manera única. Por ejemplo:
tweetsPage: “TweetsPage_tweetsPage_U3B1a”
Para aplicar el estilo declarado con los CSS Modules en React, nos dirigimos a nuestro componente original. Allí, en vez de pasarle la clase usando className= “tweetsPage”, usaremos la palabra clave styles. Entonces, la declaración de la clase quedaría de la siguiente manera:
className = {style.tweetsPage}
Con la línea de código anterior, hemos pasado la clase y el string único al elemento. Es decir, no solo pasamos el nombre de clase tweetsPage, sino que pasamos todo el string con el código hash único que llama al estilo declarado. Esto lo podrás ver más claramente en el panel de elementos de tu inspector, donde verás que la clase que toma el navegador tiene el string que obtenemos con el objeto styles.
Definir los estilos de esta manera hace que el alcance de la clase se mantenga a nivel local de CSS Modules. Esto significa que solo se aplicará al componente que hemos definido en el archivo específico. Si tuviéramos, por ejemplo, un archivo loginPage con la clase tweetsPage, el estilo de la clase no sería aplicado aunque tuviera el mismo nombre.
De este modo, CSS Modules en React nos garantiza que las clases que definimos son únicas. Y como son únicas, no pueden colisionar con ninguna otra clase que tengamos por ahí de CSS Modules.
¿Quieres seguir aprendiendo?
Ahora que sabes qué son y cómo funcionan los CSS Modules en React, ¡es momento de usar esta herramienta para estilizar tus aplicaciones y proyectos! Si quieres seguir aprendiendo a desarrollar todo tipo de proyectos de programación para la web, tanto en React como en JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva, aprenderás todo lo necesario para ser un experto del desarrollo web. ¿A qué esperas para empezar? ¡Matricúlate ya!
