¿Sabes cómo añadir estilos a un elemento React?

React es una librería JavaScript que nos permite crear interfaces de usuario en el desarrollo de 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.

¿Qué encontrarás en este post?

¿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:

Usando clases CSS

Una de las maneras más comunes para añadir estilos a un elemento React es pasarle una clase al elemento.

//Añadir estilos a un elemento React
const element = <div className="container">Hello World</div>;

En este caso, className es el atributo que utilizamos para asignar una clase CSS al elemento, con el cual hemos podido crear un hello world en React. Luego, en un archivo CSS, podemos definir los estilos correspondientes para esta clase.

/* styles.css */
.container {
  color: red;
  background-color: green;
}

Usando el objeto style

Otra manera de añadir estilos a un elemento React es a través del objeto style. Dentro de las llaves, puedes pasar un objeto con propiedades CSS en formato camelCase.

const element = (
  <div style={{ color: 'red', backgroundColor: 'green' }}>
    Hello World
  </div>
);

Comparativa de métodos de estilización

Ventajas de usar clases CSS

Reutilización: Puedes reutilizar las mismas clases en diferentes elementos.
Legibilidad: Las clases CSS suelen ser más fáciles de leer y mantener en archivos separados.
Herramientas de Desarrollo: Mayor compatibilidad con herramientas de desarrollo como linters y preprocesadores.

Ventajas de usar el objeto style

Encapsulación: Los estilos están directamente asociados con el componente.
Simplicidad: Para estilos simples o dinámicos, puede ser más fácil gestionar estilos directamente en el JSX.

Estilos dinámicos y condicionales

React permite aplicar estilos dinámicos o condicionales en función del estado o las propiedades del componente.

const isActive = true;
const styles = {
  color: isActive ? 'green' : 'red',
};

const element = <div style={styles}>Hello World</div>;

Usando librerías de estilización

Styled Components

Styled Components es una librería que permite escribir CSS dentro de los componentes.

import styled from 'styled-components';

const Container = styled.div`
  color: red;
  background-color: green;
`;

const element = <Container>Hello World</Container>;

CSS Modules

CSS Modules permiten encapsular y evitar colisiones de nombres en estilos.

/* styles.module.css */
.container {
  color: red;
  background-color: green;
}

import styles from './styles.module.css';

const element = <div className={styles.container}>Hello World</div>;

Preprocesadores CSS

Para proyectos más grandes, puedes usar preprocesadores como SASS o LESS. Integrarlos en un proyecto React es sencillo con herramientas como Create React App.

/* styles.scss */
$primary-color: red;
.container {
  color: $primary-color;
  background-color: green;
}

Buenas prácticas de estilización

Consistencia: Mantén un estilo consistente en todo el proyecto.
Modularidad: Usa CSS Modules o Styled Components para evitar colisiones de nombres.
Simplicidad: Mantén los estilos simples y fáciles de entender.
Performance: Evita estilos en línea extensos que puedan afectar el rendimiento.

Impacto en el rendimiento

Clases CSS: Generalmente tienen mejor rendimiento en cuanto a la re-renderización.
Objeto Style: Puede causar re-renderizaciones innecesarias si no se usa correctamente.

Ejemplo completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
  <script type="text/javascript">
    const rootElement = document.getElementById('root');

    const element = React.createElement(
      'div',
      {
        className: 'container',
        style: { color: 'red', backgroundColor: 'green' },
      },
      'Hello World'
    );

    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

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!