Repolode
Enviar
emotion-js

emotion-js/emotion

Una biblioteca CSS-in-JS flexible y de alto rendimiento para dar estilo a aplicaciones con estilos en formato de cadena u objeto y una composición predecible.

Ver en GitHubSitio web
Estrellas
18,018
Forks
1,137
Issues abiertos
399
Último commit
hace 2 meses

¿Qué es?

Emotion te permite escribir estilos para componentes en JavaScript, con sintaxis de cadena o de objeto. Los estilos se generan en tiempo de ejecución y se aplican como CSS, lo que permite cambiar la apariencia según las props y el estado sin mantener hojas de estilo separadas.

Su modelo de composición está diseñado para evitar conflictos de especificidad en CSS, de modo que combinar estilos da resultados predecibles. Emotion ofrece source maps y etiquetas de componentes para facilitar la depuración, y almacena en caché los estilos generados de forma intensiva en las compilaciones de producción.

Los paquetes principales son @emotion/react, que proporciona una prop css y el helper jsx, y @emotion/styled, que ofrece APIs de estilo similares a las de styled-components. Un plugin opcional de Babel añade más optimizaciones y opciones de personalización.

Funciones clave

  • 01Escribe estilos con sintaxis de cadena o de objeto.
  • 02Proporciona una prop css y APIs de estilo similares a las de styled-components.
  • 03Composición predecible de estilos que evita problemas de especificidad.
  • 04Source maps y etiquetas para facilitar la depuración.
  • 05Almacenamiento intensivo en caché de estilos en producción.
  • 06Plugin opcional de Babel para obtener optimizaciones adicionales.

Casos de uso

  • Dar estilo a aplicaciones React con estilos dinámicos o controlados por props.
  • Crear bibliotecas de componentes reutilizables con estilos componibles.
  • Migrar de hojas de estilo basadas en clases a estilos definidos junto a los componentes.

Inicio rápido

  1. 1

    Instala el paquete principal con npm

    npm install --save @emotion/react
  2. 2

    Importa jsx desde Emotion y usa la prop css en un componente

Antes de usarlo

  • El plugin de Babel es opcional, pero algunas funciones lo necesitan.

Temas

#css-in-js#react#css#styling#frontend-styling#javascript#babel-plugin#emotion#reactjs

Preguntas frecuentes

¿Qué es emotion?
Una biblioteca CSS-in-JS flexible y de alto rendimiento para dar estilo a aplicaciones con estilos en formato de cadena u objeto y una composición predecible. Emotion te permite escribir estilos para componentes en JavaScript, con sintaxis de cadena o de objeto. Los estilos se generan en tiempo de ejecución y se aplican como CSS, lo que permite cambiar la apariencia según las props y el estado sin mantener hojas de estilo separadas.
¿emotion es gratuito? ¿Qué licencia tiene?
emotion es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿emotion sigue mantenido?
Actualizado en los últimos 6 meses. El último commit de emotion fue el 28 ago 2026.
¿Para qué puedo usar emotion?
Dar estilo a aplicaciones React con estilos dinámicos o controlados por props. Crear bibliotecas de componentes reutilizables con estilos componibles. Migrar de hojas de estilo basadas en clases a estilos definidos junto a los componentes.
¿Cómo se instala emotion?
Instala el paquete principal con npm: npm install --save @emotion/react Importa jsx desde Emotion y usa la prop css en un componente
¿Dónde consigo emotion?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/emotion-js/emotion

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados