Exercícios de Fixação – Aula 05 🎨

Exercício 01: CSS Modules

Crie um componente Botao e um arquivo Botao.module.css. 1. Aplique uma classe que mude a cor de fundo para "teal" e aumente o padding. 2. Verifique no navegador como o nome da classe foi alterado para evitar conflitos.

Exercício 02: Styled Components Básico

Instale o styled-components e crie um componente chamado Titulo que seja um h1 com cor azul, fonte em itálico e margem inferior de 20px.

Exercício 03: Estilo Dinâmico (Props)

Crie um componente Box usando Styled Components que recebe uma prop bg. A cor de fundo da div deve ser o valor passado nessa prop. Teste criando três boxes com cores diferentes no App.jsx.

🔴 Nível: Desafio

Exercício 04: Botão Tematizável

Crie um componente BotaoCoringa usando Styled Components que muda completamente de estilo (cores, bordas, sombras) baseado em uma prop tipo (que pode ser 'primario', 'perigo' ou 'sucesso').

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Aplique uma classe que mude a cor de fundo para "teal" e aumente o padding.
function solucaoExercicio() {
    console.log("Executando validação de: Estilização: CSS Modules e Styled Components");
    return true;
}

solucaoExercicio();

// Solução de referência para: Verifique no navegador como o nome da classe foi alterado para evitar conflitos.
function solucaoExercicio() {
    console.log("Executando validação de: Estilização: CSS Modules e Styled Components");
    return true;
}

solucaoExercicio();