Aula 05 🎨
Estilização: CSS Modules e Styled Components
O que vamos aprender hoje? 📚
- Limitações do CSS Global
- CSS Modules: Segurança e Escopo
- Styled Components: CSS-in-JS
- Estilos Dinâmicos e Temas
1. O Fim da Cascata Caótica 🌊
O Problema do CSS Global 🤔
- Nomes de classes iguais em arquivos diferentes.
- Um estilo apaga o outro.
- Dificuldade de manutenção em projetos grandes.
2. CSS Modules 📦
Como funciona? ⚙️
- O Vite renomeia as classes no build.
.botao vira .botao_xyz123 - Conflito ZERO!
Código Prático 💻
import styles from './App.module.css';
<button className={styles.btn}>Botão</button>
3. Styled Components 💅
O que é CSS-in-JS? 🤔
- Escrever CSS dentro do JavaScript.
- Usar variáveis JS para mudar o estilo.
- Componentes estilizados e prontos.
Exemplo 💻
const Titulo = styled.h1`
color: ${props => props.cor || 'black'};
`;
4. Dinamismo Total 🌈
Estilo baseado em Props 🎁
- Se o botão é do tipo
perigo, fica vermelho.
- Se é
sucesso, fica verde.
- Tudo controlado pelo React!
🚀 Desafio da Aula
- Criar um botão com Styled Components.
- Ele deve aceitar uma prop
variant ('outline' ou 'filled').
- Mudar o estilo visual conforme a variante.
Fim da Aula 05 🎓