0Pricing
CSS Academy · Aula

Styled-components: literais de modelo marcados

Crie componentes React estilizados usando literais de modelo marcados com a biblioteca styled-components.

Styled-components: literais de modelo marcados é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 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 é styled-components?

styled-components é uma biblioteca de CSS em JS para React que permite escrever CSS diretamente dentro de arquivos JavaScript usando literais de modelo com tags. Cada componente estilizado recebe nomes de classe exclusivos com escopo automático.

Literais de modelo com tags

Os literais de modelo com tags do JavaScript permitem que uma função processe uma string de modelo. O styled-components usa esse recurso para analisar CSS:

import styled from 'styled-components';

const Button = styled.button`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
`;

// Usage in JSX:
// <Button>Click me</Button>

Estilos dinâmicos com propriedades

Acesse as propriedades do componente dentro do literal de modelo para aplicar estilos dinâmicos:

const Button = styled.button`
  background: ${props => props.variant === 'danger' ? 'crimson' : 'royalblue'};
  color: white;
  opacity: ${props => props.disabled ? 0.5 : 1};
`;

// <Button variant="danger">Delete</Button>

Alternativa com propriedades personalizadas de CSS

Para valores dinâmicos mais simples, prefira propriedades personalizadas de CSS à lógica orientada por propriedades — essa abordagem tem melhor desempenho e reduz a interpolação em JavaScript:

const Card = styled.div`
  background: var(--card-bg, white);
  color: var(--card-text, #111);
`;
// Set variables via style prop: <Card style={{ '--card-bg': 'navy' }}>

Estendendo estilos

Estenda um componente estilizado existente para adicionar estilos:

const PrimaryButton = styled(Button)`
  background: royalblue;
  font-weight: bold;
`;

const DangerButton = styled(Button)`
  background: crimson;
`;

Aninhamento e seletor &

O styled-components oferece suporte a aninhamento semelhante ao Sass usando & para fazer referência ao elemento pai:

const Nav = styled.nav`
  display: flex;

  & a {
    color: white;
    text-decoration: none;
  }

  & a:hover {
    text-decoration: underline;
  }
`;

createGlobalStyle

Defina estilos globais (redefinições e estilos básicos) usando createGlobalStyle:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  *, *::before, *::after { box-sizing: border-box; }
  body { font-family: system-ui, sans-serif; margin: 0; }
`;
// Include <GlobalStyle /> in your app root

ThemeProvider

O styled-components fornece um ThemeProvider para acessar tokens de tema nos componentes:

import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'royalblue' } };

const Button = styled.button`
  background: ${({ theme }) => theme.colors.primary};
`;

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

Considerações de desempenho

O styled-components gera nomes de classe durante a execução. Para aplicações críticas em termos de desempenho, considere a extração estática usando o plug-in do Babel ou a migração para alternativas sem tempo de execução, como Vanilla Extract ou Módulos CSS.

Renderização no lado do servidor

O styled-components oferece suporte a SSR com a API ServerStyleSheet para coletar e injetar estilos durante a renderização no servidor, evitando a exibição rápida de conteúdo sem estilos.

Alternativas e ecossistema

O ecossistema do styled-components inclui: emotion (API semelhante), linaria (sem tempo de execução), Vanilla Extract (com segurança de tipos) e Panda CSS (baseado em utilitários). Cada opção faz concessões diferentes entre sobrecarga de execução, DX e desempenho.

Verificação rápida

Como o styled-components evita colisões entre nomes de classe de diferentes componentes?

Recapitulação

O styled-components usa literais de modelo com tags para definir CSS junto aos componentes React. As propriedades podem controlar estilos dinâmicos por meio de interpolações em JavaScript. Os componentes podem ser estendidos, aninhados e associados a temas por meio do ThemeProvider. Em produção, considere o plug-in do Babel para extração estática e o suporte à renderização no lado do servidor. Para alternativas sem tempo de execução, avalie Vanilla Extract ou Módulos CSS.

Perguntas Frequentes

A aula “Styled-components: literais de modelo marcados” é grátis?

Sim — o texto completo de “Styled-components: literais de modelo marcados” é 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 “Styled-components: literais de modelo marcados”?

Crie componentes React estilizados usando literais de modelo marcados com a biblioteca styled-components. 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 1 de 4.

Quanto tempo leva a aula “Styled-components: literais de modelo marcados”?

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