📦 Uso de módulos CSS en React para estilos encapsulados

📦 Uso de módulos CSS en React para estilos encapsulados

Los CSS Modules son una técnica para escribir CSS en React de forma que los estilos estén encapsulados en un componente específico, evitando conflictos con otros estilos del proyecto.

---

1️⃣ ¿Cómo crear un módulo CSS?

Basta con nombrar tu archivo con la extensión .module.css:

/* Boton.module.css */
.boton {
  background-color: #27ae60;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.boton:hover {
  background-color: #2ecc71;
}
  

---

2️⃣ Cómo usar CSS Modules en React

Importa el módulo CSS en tu componente y usa la clase como propiedad:

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

function Boton() {
  return <button className={styles.boton}>Click aquí</button>;
}

export default Boton;
  

---

3️⃣ Ventajas de CSS Modules

• ✅ Encapsula estilos en componentes, evitando conflictos globales.
• ✅ Facilita la reutilización de componentes con estilos propios.
• ✅ Permite combinar con CSS tradicional o CSS-in-JS según necesidad.
• ✅ Genera nombres de clases únicos automáticamente para evitar colisiones.

---

4️⃣ Ejemplo avanzado: varios estilos

/* Tarjeta.module.css */
.tarjeta {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  background-color: #f7f7f7;
}

.titulo {
  color: #34495e;
  font-size: 20px;
  margin-bottom: 10px;
}

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

function Tarjeta({ titulo, contenido }) {
  return (
    <div className={styles.tarjeta}>
      <h2 className={styles.titulo}>{titulo}</h2>
      <p>{contenido}</p>
    </div>
  );
}

export default Tarjeta;
  

Título de la tarjeta

Contenido de ejemplo dentro de la tarjeta.

---

5️⃣ Buenas prácticas

• ✅ Usar nombres descriptivos para los módulos y las clases.
• ✅ Evitar estilos globales innecesarios.
• ✅ Mantener consistencia en la nomenclatura y la organización de archivos.

---

6️⃣ Resumen

Los CSS Modules ofrecen una forma segura y limpia de aplicar estilos en React. Permiten encapsular cada estilo dentro de su componente, evitando conflictos y facilitando el mantenimiento.

---

7️⃣ Ejemplo avanzado: botones con distintos colores

Puedes crear varios botones con estilos diferentes usando CSS Modules:

/* Botones.module.css */
.verde {
  background-color: #27ae60;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.azul {
  background-color: #2980b9;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.rojo {
  background-color: #c0392b;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

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

function Botones() {
  return (
    
      
      
      
    
  );
}

export default Botones;

---

8️⃣ Ejemplo avanzado: varias cards con colores diferentes

Cada card puede tener su propio color de fondo usando CSS Modules:

/* Cards.module.css */
.card {
  border-radius: 8px;
  padding: 20px;
  color: white;
  text-align: center;
}

.azul { background-color: #3498db; }
.naranja { background-color: #e67e22; }
.morada { background-color: #9b59b6; }

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

function Cards() {
  return (
    
      

        
Card Azul
        
Contenido de ejemplo para la card azul.
      
      

        
Card Naranja
        
Contenido de ejemplo para la card naranja.
      
      

        
Card Morada
        
Contenido de ejemplo para la card morada.
      
    
  );
}

export default Cards;

Card Azul

Contenido de ejemplo para la card azul.

Card Naranja

Contenido de ejemplo para la card naranja.

Card Morada

Contenido de ejemplo para la card morada.

← Volver al índice