¿Sabes qué son los estilos en React y cómo puedes añadirlos? Diseñar y estilizar son partes fundamentales para la usabilidad de cualquier proyecto de desarrollo web. Nuestras líneas de código pueden estar perfectamente escritas, pero si un usuario no entiende lo que debe hacer con nuestros elementos, hemos fallado.
Por ello, en este post, te enseñaremos cómo funcionan los estilos en React, fundamentales para distinguir nuestros proyectos.
¿Qué son los estilos en React?
Existen muchas maneras de insertar estilos en React. Cómo puedes leer en nuestro post sobre añadir estilos a un elemento React, las formas más comunes de insertar estas propiedades son las clases y la etiqueta style. A continuación, te explicamos cómo funciona cada una de estas formas de aplicar estilos en componentes.
className
En React podemos pasarle un atributo className a cualquier elemento. Al igual que en HTML, estas clases son una forma de identificar nuestro elemento. A continuación, te presentamos un ejemplo de cómo se inserta este atributo en nuestro código:
render ( ) {
return <span className = 'menu navigation.menu'>Menu</span>Entonces, podremos utilizar el atributo className junto a un poco de código CSS para añadir estilos en React.
Si utilizas esta manera de añadir estilos en React, te recomendamos la librería classnames, que puedes instalar usando su npm. Esta librería nos da la posibilidad de usar una función para crear clases complejas. Es decir, facilita el proceso de unir más de una clase. Con ella, podemos pasar distintos tipos de argumentos por una función y obtener siempre el className que queremos insertar en nuestro componente. Para explorar más la funcionalidad de esta librería, te invitamos a leer este post en Github sobre classnames.
Ten presente que la posibilidad de insertar archivos CSS para usar estilos en React no es una funcionalidad propia de esta librería. Para habilitar esta función, te sugerimos utilizar create-react-app, una herramienta que crea un ambiente predeterminado en el que podemos usar CSS modules, Sass y post.css.
style
Otra forma de insertar estilos en React es a través del atributo style. Con este atributo podemos pasar un objeto de estilos inline que contenga atributos en la nomenclatura camelCase. A continuación, te ponemos un ejemplo de este método:
const divStyle = {
color: 'blue',
backgroundImage: 'url' ('+ imgUrl + ')',
}
function HelloWorldComponent () {
return <div style = {divStyle}>Hello World!</div>;
}Como puedes ver en las líneas de código anteriores, podemos insertar el atributo style directamente dentro del elemento que nos devuelve nuestro componente. Este atributo abre una ventana a JavaScript con el uso de las llaves y, dentro de él, llamamos al objeto que contiene nuestros estilos.
Ahora que sabes qué son y cómo funcionan los estilos en React, ¡es el momento de que los utilices en tus propios proyectos! Para aprender cómo desarrollar todo tipo de proyectos de programación web, no solo en React sino también en JavaScript, CSS y HTML, entre muchas otras cosas, te invitamos a participar en nuestro Desarrollo Web Full Stack Bootcamp. ¡No te lo pierdas!
