La etiqueta style en React es una de las muchas maneras que encontramos de estilizar nuestros proyectos de programación. Este es un paso fundamental en el desarrollo de cualquier proyecto, pues nos permite diferenciar nuestros productos y hacerlos más amigables con el usuario. Por ello, en este post te enseñaremos qué es y cómo funciona la etiqueta style en React, una de las maneras que tiene esta librería para insertar estilos.
¿Qué es la etiqueta style en React?
En nuestro post sobre los estilos en React, hemos mencionado que esta librería de JavaScript nos proporciona muchas maneras de estilizar nuestras aplicaciones. Desde cargar CSS en un componente React hasta CSS Modules, no te faltarán maneras de insertar código CSS en tu proyecto JavaScritpt. La etiqueta style en React es una de estas maneras.
Entonces, al igual que podemos insertar un estilo inline en elementos HTML, podemos pasar un objeto de estilos inline mediante el atributo o etiqueta style en React. ¿Cómo hacemos eso? El primer paso es declarar un objeto literal con distintas propiedades de estilo. Puedes declarar este objeto usando cualquiera de las palabras clave de variables (const, var, let). A continuación, te mostramos un ejemplo:
const objStyle = {
color: ‘red’,
backgroundColor: ‘green’,
}
Ahora que tenemos el objeto de estilos declarado, podemos usar su nombre para pasarlo por la etiqueta style en React. Esto es lo mismo que aplicar estilos inline. A continuación, te mostramos un ejemplo donde insertamos el objeto objStyle declarado anteriormente en la etiqueta style para crear un Hello World:
function HelloWorldComponent ( ) {
return <div style= {divStyle}>Hello World! </div>;
}
Aunque tienen el mismo resultado, existen algunas diferencias entre declarar CSS con React y con HTML. Una de ellas es que las propiedades de estilo tienen una nomenclatura distinta. Mientras que en HTML escribimos las propiedades separadas con guion (background-color), en React lo haremos con la nomenclatura camelCase (backgroundColor).
Además, una de las ventajas de usar la etiqueta style en React es que podemos utilizar la lógica de JavaScript para crear los valores de nuestras propiedades. Es decir, podemos hacer operaciones y crear strings, todo lo que JavaScript nos permita cuando estamos declarando el objeto de estilos. Podemos, por ejemplo, declarar el siguiente valor:
backgroundImage: ‘url(‘ + imgUrl + ‘)’
Otra de las diferencias entre escribir CSS directamente y declarar un objeto de estilo en React es que los colores deben ir entre comillas cuando utilizamos esta librería de JavaScript. En CSS, simplemente escribiríamos blue, no ‘blue’. Esto se da porque todo lo que le pasamos como valor es o string o un número. Entonces, si quisiéramos dar un valor de 72px, simplemente ponemos 72 y React lo toma como píxeles.
¿Qué sigue?
Ahora que sabes cómo funciona la etiqueta style en React, ¡es el momento de empezar a estilizar tus aplicaciones! Para conocer más sobre cómo crear proyectos de programación para la web, no solo en React, sino en otros lenguajes como HTML, CSS y JavaScript, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Inscríbete ya!
