Olá, Eduardo. Feliz ano novo.
Esse ponto que você levantou é bem comum quando estamos migrando do mental model de HTML + CSS para o de componentes em React, então vale ajustar essa forma de pensar agora.
A ideia central é: componentes não são tags HTML customizadas. No React, o componente é a unidade de estrutura, comportamento e estilo. Ele não deve depender do contexto externo para existir corretamente.
Abaixo vou separar em não faça e faça, com exemplos práticos.
Não faça: o pai decide o estilo do filho
Quando o componente filho recebe uma className obrigatória para funcionar, ele passa a conhecer o contexto do pai indiretamente. Isso cria acoplamento estrutural.
// Filho
function Button({ className, children }) {
return (
<button className={className}>
{children}
</button>
)
}
// Pai
import './dashboard.css'
function Dashboard() {
return (
<Button className="dashboard-primary-button">
Salvar
</Button>
)
}
Problemas dessa abordagem:
- O
Button não é mais uma unidade fechada - Ele depende de CSS externo para funcionar corretamente
- Cada novo contexto precisa conhecer a implementação interna do componente
- A reutilização vira reutilização de CSS, não de componente
Esse modelo é muito parecido com HTML + CSS tradicional, apenas com funções.
Faça: o componente define sua própria identidade
Aqui o componente conhece sua estrutura e seu estilo. O CSS é um detalhe interno.
// Button.jsx
import './button.css'
function Button({ children }) {
return (
<button className="button">
{children}
</button>
)
}
/* button.css */
.button {
padding: 8px 16px;
border-radius: 4px;
}
Agora o componente:
- É previsível
- Não depende do pai
- Pode ser reutilizado em qualquer lugar sem conhecimento extra
Faça: variações sem acoplamento (props semânticas)
Quando precisamos de variações, não passamos classes, e sim intenção.
function Button({ variant = 'primary', children }) {
return (
<button className={`button button--${variant}`}>
{children}
</button>
)
}
<Button variant="primary">Salvar</Button>
<Button variant="danger">Excluir</Button>
O pai informa o que quer, não como o CSS funciona.
Faça: composição em vez de controle externo
Quando o problema é estrutura, a solução é composição.
function Card({ children }) {
return <div className="card">{children}</div>
}
function CardHeader({ children }) {
return <div className="card-header">{children}</div>
}
function CardContent({ children }) {
return <div className="card-content">{children}</div>
}
<Card>
<CardHeader>Título</CardHeader>
<CardContent>Conteúdo</CardContent>
</Card>
Cada componente:
- Conhece apenas sua responsabilidade
- Não depende de classes externas
- Pode ser reorganizado sem quebrar contratos
Sobre className
Passar className não é proibido, mas também não é a regra.
Normalmente usamos quando:
- Estamos criando componentes extremamente genéricos
- Estamos integrando com bibliotecas externas
- Existe um motivo claro para abrir esse ponto de extensão
Nas aulas 1 e 2, a escolha consciente é não fazer isso, justamente para reforçar:
- Encapsulamento
- Composição
- Independência entre componentes
O ajuste principal aqui é mental:
Não pense em reaproveitar CSS.
Pense em reaproveitar comportamento e estrutura através de componentes.
Esse é o passo de pensar como React, e não apenas escrever React.
