Repolode
Enviar
emotion-js

emotion-js/emotion

Uma biblioteca CSS-in-JS flexível e performática para estilizar apps com estilos em string ou objeto e composição previsível.

Ver no GitHubSite
Estrelas
18,018
Forks
1,137
Issues abertas
399
Último commit
há 2 meses

O que é?

Emotion permite escrever estilos de componentes em JavaScript usando sintaxe de string ou de objeto. Os estilos são gerados em runtime e aplicados como CSS, o que permite alterar a aparência com props e state sem precisar manter stylesheets separados.

Seu modelo de composição foi pensado para evitar conflitos de especificidade no CSS, fazendo com que a combinação de estilos seja previsível. Emotion oferece source maps e labels de componentes para facilitar a depuração, além de armazenar em cache os estilos gerados de forma intensiva em builds de produção.

Os principais pacotes são @emotion/react, que oferece uma prop css e o helper jsx, e @emotion/styled, que disponibiliza APIs no estilo styled-components. Um plugin opcional do Babel adiciona otimizações e opções de personalização.

Recursos principais

  • 01Escreva estilos com sintaxe de string ou de objeto.
  • 02Oferece uma prop css e APIs no estilo styled-components.
  • 03Composição previsível de estilos que evita problemas de especificidade.
  • 04Source maps e labels para facilitar a depuração.
  • 05Armazenamento intensivo de estilos em cache na produção.
  • 06Plugin opcional do Babel para otimizações adicionais.

Casos de uso

  • Estilizar aplicações React com estilos dinâmicos ou controlados por props.
  • Criar bibliotecas de componentes reutilizáveis com estilos combináveis.
  • Migrar de stylesheets baseados em classes para estilos definidos junto aos componentes.

Início rápido

  1. 1

    Instale o pacote principal com npm

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

    Importe jsx do Emotion e use a prop css em um componente

Antes de usar

  • O plugin do Babel é opcional, mas alguns recursos precisam dele.

Tópicos

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

Perguntas frequentes

O que é emotion?
Uma biblioteca CSS-in-JS flexível e performática para estilizar apps com estilos em string ou objeto e composição previsível. Emotion permite escrever estilos de componentes em JavaScript usando sintaxe de string ou de objeto. Os estilos são gerados em runtime e aplicados como CSS, o que permite alterar a aparência com props e state sem precisar manter stylesheets separados.
emotion é gratuito? Qual é a licença?
emotion é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
emotion ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de emotion foi em 28 de ago. de 2026.
Para que posso usar emotion?
Estilizar aplicações React com estilos dinâmicos ou controlados por props. Criar bibliotecas de componentes reutilizáveis com estilos combináveis. Migrar de stylesheets baseados em classes para estilos definidos junto aos componentes.
Como instalar emotion?
Instale o pacote principal com npm: npm install --save @emotion/react Importe jsx do Emotion e use a prop css em um componente
Onde consigo emotion?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/emotion-js/emotion

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados