English 中文 العربية 日本語 Português

styled-components Styled Components

Última atualização: 2026-11-03

styled-components Styled Components

O styled-components é a principal biblioteca de CSS-in-JS: você escreve CSS dentro do JavaScript com template literals marcados, e cada componente estilizado recebe um nome de classe único e seu próprio escopo. Estilos condicionais são derivados de props, e um tema é injetado através do ThemeProvider, para que um design system possa ser compartilhado em toda a aplicação em vez de ser espalhado por folhas de estilo.

GrupoEcossistema
TipoBiblioteca
Desdev6

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

npm install styled-components

import styled, { ThemeProvider } from 'styled-components'

const Button = styled.button`
  background: ${p => (p.$variant === 'danger' ? '#dc2626' : '#2563eb')};
  color: #fff; border: none; border-radius: 6px;
`

// Usage: <Button $variant="danger">Delete</Button>
// Theme: <ThemeProvider theme={{ fg: '#111' }}>…</ThemeProvider>
// Read the theme inside interpolation functions with props.theme

⚙️ Parâmetros

styled tag templateO texto CSS dentro de styled.button`…`; as funções ${interpolation} podem ler props ou o tema para derivar estilos condicionais.
$variant and other transient propsProps que começam com $ participam apenas da lógica de estilização e nunca são encaminhadas ao DOM — o estilo recomendado na v6.
theme (ThemeProvider)O objeto de tema distribuído via Context; todo componente estilizado pode lê-lo como props.theme dentro de suas funções de interpolação.

Retorna：Sem valor de retorno — veja o exemplo para o uso de bibliotecas de terceiros.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Simulação: clicar no botão Switch theme faz a transição do fundo, do texto e da borda do card entre os temas claro e escuro com uma transição CSS de 0,3s, e a paleta do botão também acompanha o tema. Isso mostra a ideia de que o objeto de tema controla os estilos no CSS-in-JS; no styled-components real, o tema é fornecido pelo ThemeProvider.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso Custo em tempo de execução: cada componente estilizado gera e injeta seus estilos dinamicamente no cliente, então, para listas grandes sensíveis a desempenho, prefira CSS Modules ou Tailwind.
💡 Dica Prefixe props transitórias com $ (por exemplo $variant) para que a lógica de estilização não seja encaminhada ao DOM como um atributo não padrão, evitando avisos do React.
ℹ️ Informação Os React Server Components (RSC) não podem usar styled-components; coloque os componentes estilizados dentro de um client component com 'use client'.
css-modules tailwind-in-react framer-motion provider-pattern
Mais casos em breve.

📚 Tutoriais Relacionados

Opções de Estilização no React
Lição 21 do tutorial: instalando styled-components, interpolação de props e injeção de tema na prática.

❓ Perguntas Frequentes

P Quais são as vantagens em relação ao Sass/Less?
R Os estilos ficam junto ao componente, a interpolação de props e a injeção de tema são suportadas, e os nomes de classe são automaticamente únicos, então nada colide. O preço é a sobrecarga em tempo de execução e o custo da configuração de SSR, então pondere isso pelo tamanho do projeto.
P Os estilos vão se sobrescrever?
R Não há conflitos: cada componente estilizado gera um nome de classe único. Ao aninhar componentes, porém, as regras normais de CSS para especificidade igual ainda se aplicam, então atenha-se à ordem de escrita.
P O que devo observar ao migrar da v5 para a v6?
R A v6 removeu várias APIs obsoletas, passou a suportar props transitórias com prefixo $ por padrão e injeta estilos mais rápido. Consulte o guia oficial de migração item por item antes de atualizar; a maioria dos projetos precisa de pouquíssimas mudanças.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%