React - Versão 19.2

8 - CSS

Nesta aula, vamos aprender a utilizar CSS para estilizar seus componentes React. Mostraremos diferentes formas de aplicar estilos, desde o CSS tradicional até opções mais modernas.

---

1. CSS tradicional (arquivo externo)

Esta é a forma que ensino na aula:

Estilo.css

.azul {
    color: blue;
}

.verde {
    color: green;
}

.vermelho {
    color: red;
}

Componente React

import "./Estilo.css";

function Estilo() {
    return (
        <>
            <p className="azul">Parágrafo 1</p>
            <p className="verde">Parágrafo 2</p>
            <p className="vermelho">Parágrafo 3</p>
        </>
    );
}

export default Estilo;

Vantagens:

• Fácil de organizar e manter
• Compatível com todos os bundlers (Vite, Webpack, CRA)

---

2. CSS inline

Podemos aplicar estilos diretamente nos elementos usando objetos JavaScript:

function EstiloInline() {
    return (
        <>
            <p style={{ color: "blue" }}>Parágrafo 1</p>
            <p style={{ color: "green" }}>Parágrafo 2</p>
            <p style={{ color: "red" }}>Parágrafo 3</p>
        </>
    );
}

export default EstiloInline;

Vantagens:

• Útil para estilos simples ou rápidos
• Não precisa criar arquivo CSS separado

Observação: Pode ficar confuso se houver muitos estilos.

---

3. CSS Modules

O CSS Modules permite criar classes locais para cada componente, evitando conflitos:

Estilo.module.css

.azul { color: blue; }
.verde { color: green; }
.vermelho { color: red; }

Componente React

import styles from "./Estilo.module.css";

function EstiloModulo() {
    return (
        <>
            <p className={styles.azul}>Parágrafo 1</p>
            <p className={styles.verde}>Parágrafo 2</p>
            <p className={styles.vermelho}>Parágrafo 3</p>
        </>
    );
}

export default EstiloModulo;

Vantagens:

• Classes são locais ao componente
• Evita conflito de nomes
• Mantém CSS organizado

---

4. Inline com objeto externo

Também podemos criar um objeto de estilos e reutilizá-lo:

const cores = {
    azul: { color: "blue" },
    verde: { color: "green" },
    vermelho: { color: "red" }
};

function EstiloObjeto() {
    return (
        <>
            <p style={cores.azul}>Parágrafo 1</p>
            <p style={cores.verde}>Parágrafo 2</p>
            <p style={cores.vermelho}>Parágrafo 3</p>
        </>
    );
}

export default EstiloObjeto;

Vantagens:

• Permite reutilizar estilos
• Mais organizado do que escrever inline diretamente no JSX

---

Dicas importantes

• Em React, não usamos `class`, usamos sempre className
• Sempre nomeie suas classes de forma clara e consistente
• CSS Modules ajudam a evitar conflito de nomes em projetos grandes
• Para estilos rápidos ou temporários, inline ou objeto externo funcionam bem

Agora você já sabe todas as formas básicas de aplicar CSS em React, podendo escolher a que melhor se encaixa no seu projeto.

Abaixo compartilho nossa aula no YouTube: