Cargar CSS desde un componente React

Autor: | Última modificación: 7 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

En programación, el proceso de estilizar es fundamental para hacer que una aplicación o página web se diferencie de las otras. Además, estilizar una aplicación es importante para su usabilidad. No basta con que un botón esté bien hecho, también es importante que el usuario sepa cómo usarlo con las claves de estilo.

En React, existen muchas maneras de estilizar una aplicación, desde manejar CSS directamente o usar una librería como styled components hasta insertar la etiqueta style dentro de nuestro código. En este post, te enseñaremos cómo cargar CSS desde un componente React para que puedas aplicar propiedades CSS en tu aplicación JavaScript.

Un poco de contexto

Supongamos que tenemos un componente llamado TweetsPage, al cual le hemos dado un nombre de clase «tweetsPage». Entonces, como hemos aprendido en nuestro post sobre los estilos en React, podemos utilizar este nombre de clase para estilizar nuestro componente. Para ello, hemos creado un archivo CSS al mismo nivel que nuestro componente JavaScript, dentro del cual hemos escrito las siguientes líneas de código de estilo:

.tweetsPage {

background-color: lightblue;

}

Ahora, tenemos este archivo CSS con las propiedades de estilo que queremos añadir a nuestro componente. Sin embargo, las propiedades no tendrán efecto hasta que hagamos el proceso de cargar CSS desde un componente React.

¿Cómo cargar CSS desde un componente React?

Para cargar CSS desde un componente React, utilizamos webPack. Con webpack y sus loaders podemos hacer import de archivos CSS desde JavaScript. Es decir, no solo podemos hacer importaciones de archivos .js y sus componentes, pero también podemos importar archivos de otros tipos.

Entonces, para cargar CSS desde un componente en React, deberemos ir al archivo donde tenemos nuestro componente e insertar la importación del archivo CSS en las primeras líneas de código. Para esta importación utilizamos la palabra clave import y luego la guía de acceso al archivo CSS que queremos insertar. En nuestro caso, esto se ve de la siguiente manera:

import ‘./TweetsPage.css’;

La línea de código anterior nos permite hacer un import dentro de nuestro archivo js para que, cuando webPack recorra todas las importaciones de nuestro proyecto, sepa que debe cargar este archivo CSS para crear un archivo CSS final.

Para asegurarte de que esta importación esté funcionando, te sugerimos tener abierto tu servidor localhost y ver los cambios. Si estás manejando una aplicación creada con create-react-app, deberías ver el cambio en la web de manera automática. En nuestro caso, veremos que el fondo de nuestro texto es ahora de color azul claro. Esto también lo podrás explorar en el panel de estilos de tu inspector web. Allí verás aplicada la clase que has definido y la propiedad de estilo.

Ten presente que la posibilidad de estilizar una aplicación de React usando CSS no es una característica de React. Es decir, lo que hace React realmente es permitirnos declarar una clase con la etiqueta className. El hecho de que podamos importar un fichero CSS en un JS es una acción completamente propia de WebPack.

¿No sabes cómo instalar webPack? ¡No te preocupes! Al crear una aplicación con create-react-app, toda esta configuración se hace de manera automática e interna, para que tú no tengas que crearla de forma manual. Lo único que debes hacer es cargar CSS desde un componente en React. Si no lo haces, es como si el archivo CSS estuviera aislado de tu proyecto. Es decir, que no sería tomado en cuenta por el programa ni por webPack al recorrer los archivos a partir del index.

¿Cuál es el siguiente paso?

Al leer este post no solo has aprendido cómo cargar CSS desde un componente React, sino que también te has acercado a dominar esta poderosa librería de programación. Ahora, el siguiente paso es dedicarte por completo a tu aprendizaje. Para ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar herramientas y lenguajes de programación para la web como React, HTML, CSS y JavaScript. ¡Anímate a dar el siguiente paso e inscríbete para destacar en el sector IT!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!