Sobrescribir estilos en React es una estrategia útil cuando queremos añadir propiedades de estilo a un elemento o cambiar las propiedades existentes según las condiciones. En códigos como HTML y CSS, esto suele hacerse con la jerarquía de elementos. En React, existen distintas estrategias. En este post, te enseñaremos cómo sobrescribir estilos en React usando le propiedad className y el orden de procesamiento de los elementos.
¿Cómo sobrescribir estilos en React?
Para aprender cómo sobrescribir estilos en React, te pondremos un ejemplo. Supongamos que hemos hecho una estructura con los elementos React, similar a la que hemos hecho en nuestro post sobre la maquetación en React. Ahora, en nuestro post sobre insertar un SVG en React, hemos separado uno de los elementos HTML para estructurarlo en otro archivo. Al elemento header lo hemos convertido en un componente React usando la siguiente función:
import logo from ‘../../assets/twitter.svg’;
function Header ( ) {
return (
<header>
<div>
<img src={logo}></img>
</div>
<nav></nav>
</header>
);
}
En estos posts no hemos mencionado que podemos pasar una prop de tipo className al componente header. ¿Para qué nos sirve eso? Pues para sobrescribir estilos en React. A continuación, te presentamos las líneas de código que tenemos con esta nueva prop:
function Header ({className}) {
return (
<header className = {classNames (‘header’, ‘className)}>
<div className= «header-logo»>
<Icon width=»32″ height=»32″/>
</div>
</header>
Como puedes ver, dentro del componente Header tenemos un elemento header. A este elemento, le pasamos una serie de clases gracias a la herramienta classNames para React. Entonces, le pasamos una primera clase ‘header’ que tiene un archivo CSS correspondiente. La segunda clase que le pasamos es la propiedad className, que definimos desde afuera.
Definir dos clases para nuestro componente Header nos permite sobrescribir estilos en React porque, aunque el componente tiene una clase header con unos estilos definidos, desde fuera del componente puedo editar su segunda clase className para añadir o sobrescribir estilos. Ten presente que a esta clase className la puedes llamar como quieras, este es solo un ejemplo de nombre.
Entonces, supongamos que la clase header tiene las siguientes propiedades de estilo:
.header {
align-items: center;
display: flex;
}
Ahora, supongamos que desde un componente layout, donde se encuentra el componente header, le pasamos los className ‘layout-header’ y ‘bordered’. Entonces, estas dos clases pasarían al componente header, que las recoge a través de su prop className. Esta prop, a su vez, pasa al elemento header, que tiene una clase className. Allí, este elemento procesará las dos clases ‘layout-header’ y ‘bordered’. Estas dos clases serán comparadas con lo que existe en la clase principal header.
Entonces, cuando el programa compare las dos clases añadidas a nuestro elemento header, este definirá cuáles se sobrescriben y cuáles se añaden. Si, por ejemplo, la clase layout-header tuviera una propiedad align-items con un valor distinto, entonces se sobrescribiría. Sin embargo, si tiene una propiedad de color blue, esta simplemente se añade, pues la clase principal no tiene un valor para esta propiedad.
Si quieres conocer más sobre cómo añadir estilos en esta poderosa librería, te invitamos a leer nuestros posts sobre cargar CSS desde un componente React, CSS Modules en React y etiqueta style en React. También te invitamos a revisar la herramienta styled components para React.
¿Qué sigue?
Ahora que ya sabes cómo sobrescribir estilos en React, ¡es la ocasión perfecta para crear y estilizar tus propias aplicaciones en esta poderosa librería! Para aprender más sobre la creación de proyectos de programación para la web, no solo en React sino también 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 convertirte en un experto del desarrollo web. ¡No te lo pierdas y apúntate!
