🎨 CSS Styling en React: aplicar estilos de manera moderna

🎨 CSS Styling en React: aplicar estilos de manera moderna

En React, podemos aplicar estilos de varias formas: usando hojas de estilo CSS externas, CSS Modules, CSS-in-JS o frameworks de estilo. Elegir la técnica correcta depende del tamaño del proyecto, la necesidad de encapsulación y la facilidad de mantenimiento.

---

1️⃣ Estilos tradicionales con CSS

Podemos crear un archivo App.css y aplicarlo a nuestro componente:

/* App.css */
.titulo {
  color: #2c3e50;
  font-size: 24px;
  text-align: center;
}

/* App.js */
import './App.css';

function App() {
  return <h1 className="titulo">Hola, React!</h1>;
}

export default App;
  

Hola, React!

---

2️⃣ CSS Modules

CSS Modules permiten estilos encapsulados, evitando conflictos de nombres:

/* App.module.css */
.titulo {
  color: #e74c3c;
  font-weight: bold;
  text-align: center;
}

/* App.js */
import styles from './App.module.css';

function App() {
  return <h1 className={styles.titulo}>Hola, React con Modules!</h1>;
}

export default App;
  

Hola, React con Modules!

---

3️⃣ CSS-in-JS

Con librerías como styled-components podemos escribir CSS directamente dentro de los componentes:

import styled from 'styled-components';

const Titulo = styled.h1`
  color: #3498db;
  font-size: 28px;
  text-align: center;
`;

function App() {
  return <Titulo>Hola, React con styled-components!</Titulo>;
}

export default App;
  

Hola, React con styled-components!

---

4️⃣ Buenas prácticas en CSS para React

• ✅ Preferir CSS Modules o CSS-in-JS para proyectos grandes y componentes reutilizables.
• ✅ Mantener consistencia en nombres de clases y estilos.
• ✅ Evitar estilos globales cuando sea posible para prevenir conflictos.
• ✅ Combinar frameworks como Tailwind, Bootstrap o Material UI según la necesidad del proyecto.

---

5️⃣ Resumen

React ofrece múltiples formas de aplicar estilos. Desde CSS tradicional hasta CSS Modules y CSS-in-JS, la clave es mantener un estilo limpio, modular y fácil de mantener.

← Volver al índice