0Pricing
CSS Academy · Aula

Emotion: css() e styled()

Aplique estilos dinâmicos com o auxiliar css() do Emotion e a fábrica de componentes styled().

Emotion: css() e styled() é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é o Emotion?

Emotion é uma biblioteca de CSS-in-JS com uma API flexível. Ela oferece duas abordagens principais: a função css() (independente de framework) e a API styled() (semelhante ao styled-components). Ambas geram automaticamente nomes de classe com escopo.

Instalando o Emotion

Há dois pacotes, dependendo das suas necessidades:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

A função css()

A função css() gera um nome de classe a partir de um objeto CSS ou de um literal de modelo:

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

Objetos CSS com css()

A sintaxe de objeto é uma alternativa aos literais de modelo — útil para o preenchimento automático do TypeScript:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

API styled()

O styled do Emotion funciona de forma idêntica ao styled-components para facilitar a migração entre eles:

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

Propriedade css (estilização embutida)

A propriedade css do Emotion permite escrever estilos diretamente nos elementos JSX — sem precisar de um componente adicional. Ela requer o pacote @emotion/react e um plugin do Babel/SWC:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Estilos dinâmicos com o Emotion

Ambas as APIs aceitam funções que recebem propriedades para obter valores dinâmicos:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

Estilos globais

Use Global de @emotion/react para definir CSS global:

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion versus styled-components

Emotion e styled-components têm APIs quase idênticas. O Emotion apresenta um desempenho ligeiramente melhor nos testes de desempenho, um tamanho de pacote menor e a propriedade css como uma API adicional. Ambos são opções comprovadas em produção para aplicações React.

Quadros-chave no Emotion

Defina animações com o auxiliar keyframes:

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

Renderização no servidor

O Emotion oferece suporte a SSR por meio de extractCriticalToChunks(), que coleta e injeta o CSS crítico durante a renderização no servidor em frameworks React como o Next.js.

Verificação rápida

Qual é a principal diferença entre a função css() do Emotion e a API styled()?

Recapitulação

O Emotion oferece duas APIs principais de estilização: css() gera nomes de classe (aplicados por meio de className), enquanto styled() cria componentes React estilizados. A propriedade css permite escrever estilos de forma semelhante à estilização embutida, com todo o poder do CSS. O Emotion é altamente compatível com styled-components em sua API e costuma ser mais rápido. Ambas as abordagens atribuem escopo automaticamente aos estilos com nomes de classe gerados.

Perguntas Frequentes

A aula “Emotion: css() e styled()” é grátis?

Sim — o texto completo de “Emotion: css() e styled()” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Emotion: css() e styled()”?

Aplique estilos dinâmicos com o auxiliar css() do Emotion e a fábrica de componentes styled(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Emotion: css() e styled()”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Styled-components: literais de modelo marcados
  2. Emotion: css() e styled()
  3. Módulos CSS: estilos com escopo
  4. Vanilla Extract: CSS-in-JS sem tempo de execução
← Voltar para CSS Academy