Añadir estilos a un elemento React

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

¿Quieres aprender a añadir estilos a un elemento React? ¡Esto artículo te da la respuesta!

React es una librería JavaScript que nos permite crear interfaces de usuario en el proceso de desarrollar una aplicación de una sola página. A este tipo de aplicaciones también se les conoce como SPA por sus siglas en inglés: single page application. Para ello, React piensa en la aplicación como pequeños bloques que se van uniendo para crear el bloque mayor, la aplicación en sí misma. El bloque más pequeño que podremos encontrar en React es un elemento. En este post, te enseñaremos cómo añadir estilos a un elemento React. 

¿Cómo añadir estilos a un elemento React? 

Un elemento React es un objeto creado en esta librería JavaScript que tiene determinadas características. Este elemento se crea utilizando el comando createElement y a las características que lo componen las llamamos atributos. Si quieres saber más sobre este tema, te invitamos a leer nuestro post sobre atributos de un elemento React

Una vez hemos creado este objeto, hay varias maneras de añadir estilos a un elemento React. Una de las maneras que tenemos para hacer esto es pasarle una clase al elemento. 

Para ello, basta con abrir llaves en el elemento, dentro de las cuales podemos insertar distintas propiedades en términos de clave:valor. Estas propiedades se encontrarán dentro del elemento bajo el atributo props, el cual puedes analizar dentro del inspector de tu navegador en la sección console. Dentro de estas llaves, podrás insertar una clase a tu elemento usando la clave className. Al valor de esta clave puedes agregarle el número de clases que quieras. Luego, usando un documento CSS, podrás llamar a estas clases para agregarle estilos de modo tradicional. 

Otra manera de añadir estilos a un elemento React es a través del objeto style. Dentro de las llaves, podrás pasar un objeto style a todos los elementos React. Con este objeto, podrás abrir otro set de llaves que funcionan de manera similar al styling line. Dentro de estas nuevas llaves que conforman el objeto, definirás las propiedades de estilo que quieres tener en tu elemento. Ten en cuenta que estas propiedades se definen en términos de camelCase. Es decir, en vez de insertar background-color, escribimos backgroundColor. 

NOTA: El objeto style se encontrará dentro del atributo props. En el inspector de tu navegador podrás desplegar este atributo para encontrar las propiedades children, className y, ahora, style. 

A continuación, te mostramos un ejemplo de cómo hemos añadido los estilos color rojo y color de fondo verde a un elemento React. El elemento que te presentamos a continuación es un hello world, que puedes aprender a escribir en nuestro post crear un hello world en React.

<html>

<body> 

<div id= “root”></div>

</body>

<script type = “text/javascript”>

const rootElement = document.getElementById (‘root’);

const element = React.createElement {

‘div’,

{

className = ‘container’;

children: ‘Hello World’ 

style {color: ’red’, backgroundColor: ‘green’},

},

console.log (element);

ReactDOM.reader (element, rootElement); 

</script>

</html>

¿Quieres seguir aprendiendo?

Ahora que sabes cómo añadir estilos a un elemento React, seguro que tienes ganas de seguir aprendiendo sobre esta extensa librería de JavaScript. Para ello, te recomendamos echarle un vistazo a nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar esta y otras herramientas de la programación para la web. Así, en pocos meses, dominarás lenguajes como CSS, HTML, JavaScript y JSX. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Inscríbete ya!

👉 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!