Pular para conteúdo

Aula 05 – Estilização: CSS Modules e Styled Components 🎨

Existem várias formas de estilizar um projeto React. Hoje vamos conhecer as técnicas que evitam conflitos de nomes e tornam o CSS mais dinâmico.

📦 1. CSS Modules

O CSS Modules permite escrever CSS normal, mas garante que os nomes das classes sejam únicos por componente.

Como usar:

  1. Crie um arquivo chamado Botao.module.css.
  2. Importe no seu componente: import styles from './Botao.module.css'.
function Botao() {
  return <button className={styles.btnPrimario}>Clique aqui</button>;
}

Vantagem

O CSS Modules renomeia suas classes no navegador (ex: btnPrimario_abc123), eliminando o risco de um estilo "vazar" para outro componente.

💅 2. Styled Components (CSS-in-JS)

O Styled Components permite escrever CSS diretamente dentro do arquivo JavaScript, usando a sintaxe de Tagged Templates.

Instalação:

$ npm install styled-components

Exemplo de Uso:

import styled from 'styled-components';

const BotaoCustomizado = styled.button`
  background-color: ${props => props.color || 'blue'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

  &:hover {
    filter: brightness(0.9);
  }
`;

🌈 CSS Condicional

Com React, é fácil mudar o estilo baseado no estado ou em props.

<p className={isActive ? 'text-green' : 'text-red'}>
  Status: {isActive ? 'Ativo' : 'Inativo'}
</p>

🚀 Prática da Aula

Vamos criar uma "Biblioteca de Botões" temática.

  1. Crie um componente Botao usando Styled Components.
  2. Adicione as variantes: success, danger e warning.
  3. O botão deve mudar de cor dependendo da prop recebida.

📊 Comparativo de Técnicas

Técnica Pró Contra
CSS Modules Nativo do Vite, fácil de aprender. Menos dinâmico, arquivos separados.
Styled Components Super dinâmico, CSS vira componente. Precisa de biblioteca extra, curva de aprendizado.
Tailwind CSS Desenvolvimento ultra rápido. HTML fica "poluído" com muitas classes.

Qual escolher?

Em projetos grandes, costuma-se usar uma combinação de Styled Components (para lógica de UI) e classes utilitárias.