tss-react

Qué es

tss-react es una librería CSS-in-TS creada por Joseph Garrone que funciona como un equivalente tipado de la API de JSS pero por debajo se apoya en Emotion. Permite escribir estilos en React usando CSS plano, sin sintaxis propia que aprender, y nació principalmente como sustituto del makeStyles de Material-UI v4, que quedó obsoleto al migrar MUI a Emotion.

Para qué sirve

• Generar estilos dinámicos en función de las props y el estado interno de un componente.
• Sustituir el makeStyles de MUI v4 al migrar a MUI v5 o versiones posteriores.
• Tener autocompletado y comprobación de tipos sobre las clases CSS que defines.
• Controlar la especificidad y evitar conflictos de prioridad entre clases.

Cuándo usarlo

Encaja sobre todo en proyectos React con MUI que vienen de la API makeStyles de la v4 y necesitan una ruta de migración con sintaxis familiar. También sirve fuera de MUI cuando prefieres una API estilo JSS con tipado fuerte frente a alternativas como las plantillas de styled-components o el uso directo de Emotion con styled.

Ejemplo

Instalación junto a Emotion:

npm install tss-react @emotion/react

Uso básico con estilos que dependen de las props:

import { tss } from 'tss-react';

function MiBoton(props: { color: 'primary' | 'danger' }) {
  const { classes } = useStyles({ color: props.color });
  return <button className={classes.root}>Aceptar</button>;
}

const useStyles = tss.withParams<{ color: 'primary' | 'danger' }>().create(({ color }) => ({
  root: {
    backgroundColor: color === 'danger' ? 'crimson' : 'royalblue',
    color: 'white',
    padding: '8px 16px',
  },
}));

Puntos clave

• API tipo JSS con tipado completo en TypeScript, sobre el motor de Emotion.
• Soporte explícito de estilos dependientes de props y estado del componente.
• Integración pensada para MUI, con utilidades para acceder al tema.
• Compatible con renderizado en servidor (SSR), incluido Next.js.

Ten en cuenta

Requiere @emotion/react como dependencia y está orientado al ecosistema React. Si tu proyecto no usa MUI ni viene de makeStyles, conviene valorar si una solución más extendida como styled-components o el propio Emotion encaja mejor con tu equipo. Es un proyecto open source con licencia MIT y mantenimiento activo.