🖋️ CSS-in-JS: integrar estilos dentro de tus componentes

🖋️ CSS-in-JS: integrar estilos dentro de tus componentes

CSS-in-JS es una técnica que permite escribir estilos directamente dentro de tus componentes de React usando JavaScript. Esto facilita la integración de estilos dinámicos basados en props, estado o cualquier lógica de tu componente.

---

1️⃣ Crear un componente con estilos CSS-in-JS

Puedes definir un objeto de estilos en JavaScript y aplicarlo directamente al elemento usando la propiedad style:

// Componente BotonInline.js
function BotonInline() {
  const estilos = {
    backgroundColor: "#27ae60",
    color: "white",
    padding: "10px 20px",
    borderRadius: "6px",
    border: "none",
    cursor: "pointer"
  };

  return <button style={estilos}>Click aquí</button>;
}

export default BotonInline;
  

---

2️⃣ Estilos dinámicos con props

Con CSS-in-JS puedes cambiar los estilos de manera dinámica según las props del componente:

// Componente BotonDinámico.js
function BotonDinámico({ colorFondo }) {
  const estilos = {
    backgroundColor: colorFondo,
    color: "white",
    padding: "10px 20px",
    borderRadius: "6px",
    border: "none",
    cursor: "pointer"
  };

  return <button style={estilos}>Botón dinámico</button>;
}

export default BotonDinámico;

// Uso
<BotonDinámico colorFondo="#2980b9" />
<BotonDinámico colorFondo="#c0392b" />
  

---

3️⃣ Ventajas de CSS-in-JS

• ✅ Permite estilos dinámicos basados en props o estado.
• ✅ Evita conflictos de nombres y alcance global.
• ✅ Mantiene los estilos junto al componente, mejorando la mantenibilidad.
• ✅ Facilita el uso de JavaScript para calcular colores, tamaños o animaciones.

---

4️⃣ Resumen

CSS-in-JS es ideal cuando quieres combinar lógica y estilos en el mismo lugar, ofreciendo flexibilidad y encapsulamiento completo dentro de tus componentes React.

← Volver al índice