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

---

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.

/* App.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:

// App.js
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:

<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 ejemplo, el objeto { color: 'red' } se aplica directamente al elemento <p> como estilo en línea:

<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.

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

Estilizar un botón con estilos dinámicos

En este ejemplo, 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.

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.

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

// 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.

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

Paso 2. Importar el CSS Module en el Componente

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

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

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:

npm install styled-components

Paso 2: Crear un Componente Estilizado

// 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

npm install @emotion/react @emotion/styled

Paso 2: Definir y Usar un Componente Estilizado

/** @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:

/** @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:

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:

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 “)