Guías Técnicas

CSS en React: Guía Completa de Estilos para Componentes

  CSS en React

En React, existen varias maneras de aplicar estilos a los componentes. Esta guía cubre las opciones más actualizadas y efectivas, desde el uso de CSS tradicional hasta técnicas avanzadas como CSS Modules y Styled Components.

1. CSS Global (Archivo CSS Importado)

Esta es la forma más básica de agregar CSS en un proyecto React. Se recomienda para estilos globales o cuando recién estás comenzando con React.

Paso 1. Crear un Archivo CSS

Crea un archivo con extensión .css en tu proyecto. Por ejemplo: App.css.

css 
body {
  font-family: Arial, sans-serif;
}
.header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

Paso 2: Importar el Archivo CSS en el Componente Principal

Importa el archivo en tu componente o archivo principal:

jsx 
import './App.css';

function App() {
  return (
    <div>
      <h1 className="header">Bienvenido a React</h1>
    </div>
  );
}

export default App;

¿Por qué className en lugar de class?

En React, se usa className en lugar de class, ya que class es una palabra reservada en JavaScript. Al aplicar una clase a un elemento en React, debes usar el atributo className:

jsx 
<h1 className="header">Bienvenido a React</h1>

Selección de Estilos en CSS

En tu archivo CSS, puedes aplicar estilos a través de distintos selectores:

  • Selector de Clase (.header): Estiliza elementos específicos usando una clase. Aplícalo en React con className.

    jsx 
    .header {
  background-color: #282c34;
  color: white;
}

  • Selector de ID (#unique): Los estilos con ID son únicos para un elemento. Aplica este selector en tu componente usando el atributo id.

    jsx 
    #unique {
  color: green;
}

<h2 id="unique">Soy un subtítulo único</h2>

  • Selector de Etiqueta (p): Aplica estilos a todos los elementos de un tipo específico. Por ejemplo, todos los párrafos (<p>).

    jsx 
    p {
  font-size: 16px;
  color: #333;
}

<p>Este es un párrafo estilizado con CSS.</p>

2. CSS en Línea (Inline Styles)

Los estilos en línea se aplican directamente al componente usando un objeto en formato JavaScript. Es útil para estilos dinámicos o específicos.

Cambiar color de la etiqueta <p>

En este contexto, el objeto { color: 'red' } se aplica directamente al elemento <p> como estilo en línea:

jsx 
<p style={{ color: 'red' }}>Me han cambiado el color.</p>

Cambiar color del texto <h1>

Puedes especificar directamente el color del texto utilizando la propiedad color.

jsx 
function Titulo() {
  return <h1 style={{ color: 'blue', fontSize: '24px' }}>Bienvenido a React</h1>;
}

Estilizar un botón con estilos dinámicos

En este escenario, el botón cambia de color de fondo y texto dependiendo de si el estado isPrimary es verdadero o falso. Al hacer clic en el botón, su estado se alterna, cambiando su apariencia.

jsx 
import React, { useState } from 'react';

function Boton() {
  const [isPrimary, setIsPrimary] = useState(true);

  return (
    <button
      style={{
        backgroundColor: isPrimary ? 'blue' : 'gray',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
      }}
      onClick={() => setIsPrimary(!isPrimary)}
    >
      {isPrimary ? 'Primario' : 'Secundario'}
    </button>
  );
}

Estilos condicionales basados en propiedades

Este ejemplo muestra cómo aplicar estilos condicionales a un componente en función de sus propiedades (props). El estilo del texto cambia según el valor de la propiedad importante.

jsx 
function Mensaje({ importante }) {
  return (
    <p
      style={{
        fontWeight: importante ? 'bold' : 'normal',
        color: importante ? 'red' : 'black',
      }}
    >
      {importante ? 'Este es un mensaje importante.' : 'Este es un mensaje común.'}
    </p>
  );
}

Declarar estilos CSS desde un objeto

jsx 
// Componente Button
function Button() {
  // Declarando un objeto con propiedades CSS en formato JavaScript
  const buttonStyle = {
      backgroundColor: 'blue',
      color: 'white',
      padding: '10px',
      borderRadius: '5px'
  };

  return <button style={buttonStyle}>Clic aquí</button>;
}

export default Button;

3. CSS Modules (Modularización de CSS)

CSS Modules permiten importar estilos como módulos únicos, lo que ayuda a evitar conflictos de nombres. Cada clase se hace única para el componente donde se importa.

Paso 1. Crear un Archivo CSS Module

Nombra el archivo con la extensión .module.css. Por ejemplo: Button.module.css.

css 
/* Button.module.css */
.button {
  background-color: green;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

Paso 2. Importar el CSS Module en el Componente

jsx 
// Button.js
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Clic aquí</button>;
}

export default Button;

¿Por qué Usamos styles.button en CSS Modules?

CSS Modules te permite crear estilos que están localizados por defecto, lo que significa que los nombres de clase en un archivo CSS Module se convierten en identificadores únicos al importarlos en un componente. Esto evita problemas de colisión de estilos y permite que diferentes componentes usen clases con el mismo nombre sin interferir entre sí.

Cómo Funciona styles.button

  1. Cuando importas un CSS Module, como en:
jsx 
import styles from './Button.module.css';
  Introducción a los Hooks

styles se convierte en un objeto que contiene todos los selectores de clase del archivo Button.module.css como propiedades. Cada clase del CSS Module se mapea a una propiedad única de styles.

  • Al usar styles.button, estás accediendo a la clase .button definida en Button.module.css, pero con un nombre de clase único que React genera automáticamente al compilar el proyecto.

  • Esto hace que puedas usar la clase .button en diferentes componentes sin preocuparte de que los estilos se sobrescriban. De esta forma, la clase aplicada en el HTML se verá algo así como Button_button__3Kj3H en lugar de solo button, asegurando que sea única en el DOM y evitando conflictos de estilos entre componentes.

4. Styled Components (CSS-in-JS)

Styled Components es una librería popular para agregar CSS directamente en los componentes, usando JavaScript. Los estilos se aplican en un entorno modular y permite definir estilos con props dinámicos.

Paso 1: Instalar Styled Components

Primero, instala la librería con:

bash 
npm install styled-components

Paso 2: Crear un Componente Estilizado

jsx 
// Button.js
import styled from 'styled-components';

const Button = styled.button`
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Button>Clic aquí</Button>;
}

export default App;

Aquí, styled.button define un componente de botón que lleva los estilos aplicados directamente. Los estilos se escriben usando Template Literals con comillas invertidas (**) en lugar de las llaves **` habituales en JavaScript, permitiendo incluir CSS directamente.

5. CSS-in-JS con Emotion

Emotion es una alternativa similar a Styled Components que también permite estilos CSS con JavaScript. Su ventaja es su flexibilidad y rendimiento.

Paso 1: Instalar Emotion

bash 
npm install @emotion/react @emotion/styled

Paso 2: Definir y Usar un Componente Estilizado

jsx 
/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled';

const Button = styled.button`
  background-color: #ff6600;
  color: white;
  padding: 10px;
  border-radius: 5px;
  &:hover {
    background-color: #cc5200;
  }
`;

function App() {
  return <Button>Click Aquí</Button>;
}

export default App;

Explicación del Código

Declaración @jsxImportSource @emotion/react:

jsx 
/** @jsxImportSource @emotion/react */

Este comentario al inicio indica a React que use @emotion/react como fuente para el procesamiento JSX, habilitando características avanzadas de Emotion como el uso de CSS-in-JS.

Importación de @emotion/styled:

jsx 
import styled from '@emotion/styled';

@emotion/styled permite definir componentes estilizados mediante una sintaxis similar a Styled Components. Al importar styled de Emotion, puedes crear componentes de React con estilos encapsulados.

Creación del Componente Button con @emotion/styled:

jsx 
const Button = styled.button`
  background-color: #ff6600;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

Aquí, styled.button define un componente Button estilizado con propiedades CSS aplicadas directamente. Los estilos se escriben usando Template Literals (comillas invertidas “)