Estilos en React

Formas de Estilizar en React

Hay varias formas de aplicar estilos en React. Cada enfoque tiene sus ventajas dependiendo del proyecto.

Estilos en Linea

function Componente() {
  const estilos = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '8px'
  };

  return (
    <div style={estilos}>
      <p style={{ fontSize: '16px', margin: 0 }}>
        Texto estilizado
      </p>
    </div>
  );
}

CSS Regular

/* styles.css */
.tarjeta {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tarjeta-titulo {
  font-size: 24px;
  font-weight: bold;
}

// Componente.jsx
import './styles.css';

function Tarjeta() {
  return (
    <div className="tarjeta">
      <h2 className="tarjeta-titulo">Titulo</h2>
    </div>
  );
}

Modulos CSS

/* Tarjeta.module.css */
.tarjeta {
  background: white;
  border-radius: 8px;
}

.titulo {
  font-size: 24px;
}

// Tarjeta.jsx
import styles from './Tarjeta.module.css';

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

// Multiples clases
<div className={`${styles.tarjeta} ${styles.activo}`}>

Tailwind CSS

function Tarjeta() {
  return (
    <div className="bg-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
      <h2 className="text-2xl font-bold text-gray-800 mb-4">
        Titulo
      </h2>
      <p className="text-gray-600">
        Contenido de la tarjeta
      </p>
      <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        Accion
      </button>
    </div>
  );
}

Estilos Condicionales

// Con template literals
function Boton({ variante, deshabilitado }) {
  return (
    <button
      className={`btn btn-${variante} ${deshabilitado ? 'btn-deshabilitado' : ''}`}
      disabled={deshabilitado}
    >
      Click
    </button>
  );
}

// Con libreria clsx
import clsx from 'clsx';

function Boton({ primario, tamano, deshabilitado }) {
  return (
    <button
      className={clsx(
        'btn',
        primario && 'btn-primario',
        tamano === 'grande' && 'btn-lg',
        deshabilitado && 'btn-deshabilitado'
      )}
    >
      Click
    </button>
  );
}