Pular para conteúdo

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

Exercício 01: CSS Modules

Crie um componente Botao e um arquivo Botao.module.css. Aplique uma classe que mude a cor de fundo e o arredondamento das bordas. Verifique no navegador como o nome da classe foi alterado (inspecionar elemento).

Exercício 02: Styled Components Básico

Instale o styled-components e crie um componente chamado Titulo que seja um h1 com cor azul e fonte em itálico.

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.

Quiz – Aula 05 🧠

  1. Qual a principal vantagem do CSS Modules?
  2. Deixa o site mais rápido.
  3. Evita conflitos de nomes de classes entre componentes diferentes.
  4. Transforma o CSS em JavaScript automaticamente.

  5. Não precisa de arquivos .css. Explicação: CSS Modules gera escopos locais para as classes CSS.

  6. Como instalamos o Styled Components em um projeto?

  7. npm install styled-components
  8. npm get styled
  9. Já vem instalado no Windows.
  10. Copiando o arquivo .exe. Explicação: É uma biblioteca de terceiros baixada via NPM.

Projeto 05 – Landing Page Tematizável 🌈

Objetivo: Criar uma página com troca dinâmica de temas usando Styled Components. - Use ThemeProvider ou apenas estilos dinâmicos baseados em props. - Crie um botão que alterna entre tema "Verão" e tema "Inverno". - Use Styled Components para todos os elementos principais.