🚀 Capítulo 06: Estilos - Armadura Mandaloriana

🎯 Objetivo da Aula

Ao final desta aula, você saberá como aplicar estilos CSS nos seus componentes React usando duas técnicas principais: CSS Inline (direto na tag) e CSS Modules (arquivos separados e isolados).

---

🏢 O Cenário Prático (Seu Desafio)

Uma armadura de Beskar (Mandaloriana) precisa ser personalizada! Seu desafio hoje é aplicar estilos visuais ao componente da armadura, mudando a cor de fundo dinamicamente quando ela sofrer um ataque!

---

🧠 Fundamentos: A Teoria Traduzida

No React, nós não usamos o atributo style="color: red" como no HTML comum. Como estamos no JavaScript, as coisas mudam um pouco:

1. CSS Inline (como Objeto)

No JSX, o estilo é passado como um objeto JavaScript. Por isso, usamos duas chaves: a primeira para dizer que é código JS e a segunda para criar o objeto.

• Sintaxe: <div style={{ backgroundColor: 'blue', color: 'white' }}>
• Nota: Usamos backgroundColor (camelCase) em vez de background-color.

2. CSS Modules

Para evitar que o CSS de um componente estrague o estilo de outro componente, o React usa CSS Modules. Criamos um arquivo chamado Nome.module.css e ele gera classes com nomes únicos automaticamente!

---

📖 Exemplo Guiado: Armadura Reativa

Vamos criar um estilo dinâmico baseado no estado.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx e use o useState para controlar o dano:

import { useState } from 'react';
 
function App() {
  const [sofreuDano, setSofreuDano] = useState(false);
 
  // Objeto de estilo que muda baseado no estado
  const estiloArmadura = {
    backgroundColor: sofreuDano ? '#ff4d4d' : '#cccccc',
    padding: '20px',
    borderRadius: '10px',
    textAlign: 'center',
    border: '3px solid' + (sofreuDano ? 'red' : 'gray')
  };
 
  return (
    <div>
      <h1>🛠️ Forja Mandaloriana</h1>
      
      <div style={estiloArmadura}>
        <h2>Armadura de Beskar</h2>
        <p>Status: {sofreuDano ? '🚨 Sob Ataque!' : '🛡️ Intacta'}</p>
      </div>
 
      <button onClick={() => setSofreuDano(!sofreuDano)}>
        Simular Ataque
      </button>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e veja o navegador.
2. Clique no botão e veja a cor da caixa mudar de cinza para vermelho!

---

🛠️ Prática Obrigatória 1

Crie um arquivo chamado App.module.css na pasta src. Adicione uma classe chamada .titulo com a cor dourada (color: gold;) e importe esse arquivo no App.jsx para aplicar no título <h1>. Dica de import: import styles from './App.module.css'; Dica de uso: <h1 className={styles.titulo}>

---

🛠️ Prática Obrigatória 2

Use o CSS Inline para fazer com que o botão mude de tamanho de fonte (fontSize) quando o mouse passar por cima (pesquise sobre o evento onMouseEnter ou use apenas uma variável de estado).

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No App.module.css:

.titulo {
  color: gold;
  font-family: sans-serif;
}

No App.jsx:

import styles from './App.module.css';
 
// ... dentro do return
<h1 className={styles.titulo}>Forja Mandaloriana</h1>

---

← Capitulo Anterior | Proximo Capitulo →