0Pricing
Frontend Academy · Aula

CSS-in-JS: Styled-components e Emotion

Escreva estilos de componentes como literais de template marcados com styled-components ou usando a propriedade css do Emotion, e use props para estilos dinâmicos.

CSS-in-JS: Styled-components e Emotion é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é CSS-in-JS

CSS-in-JS escreve os estilos dos componentes diretamente em JavaScript/TypeScript. Os estilos ficam junto dos componentes, aceitam valores dinâmicos das propriedades e recebem escopo automaticamente. As duas bibliotecas mais populares são styled-components e Emotion.

Fundamentos do styled-components

Use literais de modelo com marcação para definir componentes estilizados. O resultado é um componente React que renderiza um elemento HTML com os estilos aplicados.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.primary ? '#6366f1' : 'white'};
  color: ${props => props.primary ? 'white' : '#6366f1'};
  padding: 8px 16px;
  border: 2px solid #6366f1;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    opacity: 0.9;
  }
`;

<Button primary>Primary</Button>
<Button>Outline</Button>

Emotion — propriedade css

A propriedade css do Emotion aplica estilos a qualquer elemento JSX. É necessário usar a diretiva @emotion/react ou a predefinição do Babel.

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

function Card({ featured }: { featured?: boolean }) {
  return (
    <div css={css`
      padding: 16px;
      border-radius: 8px;
      border: ${featured ? '2px solid #6366f1' : '1px solid #e2e8f0'};
    `}>
      Content
    </div>
  );
}

Estilos dinâmicos a partir das propriedades

Ambas as bibliotecas podem ler propriedades para calcular estilos. Essa é a principal vantagem delas em relação ao CSS estático — não é necessário alternar classes.

Tematização com ThemeProvider

Styled-components e Emotion oferecem suporte a um ThemeProvider que injeta valores do tema em todos os componentes estilizados.

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: '#6366f1', bg: '#f7fafc' }, space: { sm: 8, md: 16 } };

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

// Access in styled component:
const Card = styled.div`
  background: ${props => props.theme.colors.bg};
  padding: ${props => props.theme.space.md}px;
`;

Estendendo componentes estilizados

Estenda um componente estilizado existente para criar uma variante sem duplicar estilos.

const Button = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
`;

const DangerButton = styled(Button)`
  background: #e53e3e;
  color: white;
`;

Estilos globais

Use createGlobalStyle (styled-components) ou Global (Emotion) para CSS global, como estilos do corpo da página e redefinições.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font-family: system-ui; }
`;

<><GlobalStyle /><App /></>

Custo em tempo de execução do CSS-in-JS

As bibliotecas de CSS-in-JS injetam estilos em tempo de execução por meio de JavaScript. Isso acrescenta custo de CPU para analisar e injetar estilos, além de aumentar o tamanho do pacote JavaScript. Alternativas sem execução em tempo de execução (vanilla-extract, linaria) geram CSS estático no momento da compilação.

Alternativas sem execução em tempo de execução

vanilla-extract: escreva estilos em TypeScript, compilados para CSS estático. linaria: sintaxe de CSS-in-JS compilada para módulos CSS. Ambas oferecem a praticidade do CSS-in-JS sem sobrecarga em tempo de execução.

TypeScript com styled-components

Defina um ThemeType e estenda a interface DefaultTheme do styled-components para obter temas totalmente tipados.

import 'styled-components';
import { theme } from './theme';

declare module 'styled-components' {
  export interface DefaultTheme extends typeof theme {}
}

Quando escolher CSS-in-JS

O CSS-in-JS é excelente para: estilos dinâmicos controlados por valores de JavaScript em tempo de execução, sistemas de projeto visual com fortes necessidades de tematização e equipes que preferem fluxos de trabalho centrados em JS. O custo em tempo de execução geralmente é aceitável para interfaces que não são críticas em termos de desempenho.

Verificação rápida

Qual é a principal desvantagem das bibliotecas de CSS-in-JS em tempo de execução em comparação com soluções de CSS estático?

Recapitulação: CSS-in-JS

Styled-components: literais de modelo com marcação que renderizam um elemento React estilizado. Emotion: propriedade css ou API styled. Estilos dinâmicos a partir das propriedades eliminam a alternância de classes. ThemeProvider injeta valores do tema. createGlobalStyle é usado para CSS global. O custo em tempo de execução é a principal desvantagem. Alternativas sem execução em tempo de execução: vanilla-extract e linaria.

Perguntas Frequentes

A aula “CSS-in-JS: Styled-components e Emotion” é grátis?

Sim — o texto completo de “CSS-in-JS: Styled-components e Emotion” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “CSS-in-JS: Styled-components e Emotion”?

Escreva estilos de componentes como literais de template marcados com styled-components ou usando a propriedade css do Emotion, e use props para estilos dinâmicos. Você pratica Frontend 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 Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend 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 3 de 4.

Quanto tempo leva a aula “CSS-in-JS: Styled-components e Emotion”?

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 Frontend Academy?

Sim. Cada aula de Frontend 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. Metodologia BEM: bloco elemento modificador
  2. Módulos CSS: nomes de classes com escopo
  3. CSS-in-JS: Styled-components e Emotion
  4. Tailwind CSS: abordagem utility-first
← Voltar para Frontend Academy