06 - Estilizar um app React¶

Introdução¶

Há várias abordagens populares, incluindo:

CSS Modules: cria escopo local para o CSS, evitando conflito entre estilos.
Tailwind CSS: usa classes utilitárias no HTML/JSX para estilizar elementos, dispensando a criação de folhas de estilo externas.
Sass/SCSS: extensão do CSS que permite o uso de variáveis, aninhamento e mixins.
CSS-in-JS Libraries: além do Styled Components e Emotion, há outras como Stitches e Linaria que também suportam CSS no JavaScript.
Styled Components: utiliza JavaScript para escrever CSS dentro de componentes. Cada componente tem estilos únicos, facilitando a modularidade.
Emotion: semelhante ao Styled Components, também permite escrever CSS com JavaScript e oferece suporte para temas.

CSS-in-JS¶

CSS-in-JS é uma abordagem que permite escrever CSS diretamente em JavaScript, popular em frameworks de componentes como React. Com CSS-in-JS, o estilo fica associado ao componente, garantindo um escopo mais controlado e, geralmente, um código mais modular. Essa técnica ganhou destaque com o desenvolvimento de bibliotecas como Styled Components, Emotion, Linaria e Stitches.

Conceitos Principais do CSS-in-JS¶

Escopo Local de Estilos: O CSS aplicado a um componente não interfere no estilo de outros, resolvendo o problema de conflitos globais entre classes.
Estilo Dinâmico: CSS-in-JS permite o uso de lógica JavaScript para aplicar estilos, como condicionais baseadas em props.
Modularidade: Com CSS encapsulado em cada componente, os estilos são mais reutilizáveis e menos propensos a duplicação.
Estilos Condicionais e Temas: Permite facilmente criar estilos que respondem a variáveis globais, como temas claros e escuros.

Vantagens do CSS-in-JS¶

Modularidade e Escopo de Estilos: Cada componente tem seu estilo próprio, o que melhora a manutenção e evita vazamentos de estilo.
Estilos Dinâmicos: Torna fácil alterar o CSS de um componente com base em seu estado ou propriedades.
Remoção de CSS Não Utilizado: Como os estilos estão atrelados a componentes, ferramentas de build podem facilmente identificar e remover código CSS não utilizado.
Temas: Facilita a implementação de temas, especialmente com bibliotecas que suportam Theme Providers.
SSR (Server-Side Rendering): Algumas bibliotecas de CSS-in-JS oferecem suporte para renderização do CSS no servidor, útil em aplicações SSR como Next.js.

Desvantagens do CSS-in-JS¶

Sobrecarga de Desempenho: CSS-in-JS pode aumentar o tempo de carregamento em projetos de grande escala, devido ao tempo extra necessário para processar e aplicar estilos.
Maior Tamanho de Bundle: Como o CSS é incluído nos arquivos JavaScript, o tamanho do bundle pode ser maior, impactando o desempenho.
Curva de Aprendizado: Para quem já domina CSS, o CSS-in-JS pode demandar uma adaptação para entender e aplicar estilos dentro de JavaScript.
Compatibilidade: O uso de CSS-in-JS com algumas bibliotecas externas pode exigir configurações adicionais para garantir o escopo e funcionamento correto dos estilos.
Erro de Sintaxe: Como CSS-in-JS combina JavaScript e CSS, erros de sintaxe se tornam mais comuns ao misturar código JavaScript e CSS juntos.

Quando Usar CSS-in-JS?¶

O CSS-in-JS é recomendado para:

Componentes de Interface Complexos: Quando os estilos precisam ser dinâmicos, como em componentes que mudam com o estado do usuário.
Projetos com Temas: Em projetos que exigem mudança de temas, como em interfaces de modo claro e escuro.
Aplicações Baseadas em Componentes: Especialmente em ambientes como React e Vue, onde o CSS escopado em cada componente pode ser vantajoso.

Por outro lado, para projetos simples ou onde o desempenho é uma preocupação central, o CSS tradicional, CSS Modules, ou até bibliotecas como Tailwind CSS podem ser mais adequados.

Styled Components¶

Abaixo, segue um exemplo de como criar um app Vite com React usando Styled Components:

1. Crie o projeto com Vite¶

npm create vite@latest styled_app --template react
cd nome-do-projeto
npm install

2. Instale o Styled Components¶

npm install styled-components

3. Configure um Componente com Styled Components¶

No arquivo App.jsx, importe styled-components e crie um botão estilizado:

import React from 'react';
import styled from 'styled-components';

const BotaoEstilizado = styled.button`
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: #2980b9;
  }
`;

function App() {
  return (
    <div>
      <h1>Meu App com Styled Components</h1>
      <BotaoEstilizado>Clique aqui</BotaoEstilizado>
    </div>
  );
}

export default App;

4. Execute o app¶

Para iniciar o app e ver os estilos aplicados:

npm run dev

Esse exemplo configura um botão com estilos customizados usando o styled-components, permitindo criar componentes reutilizáveis e bem encapsulados.

Adicionar ao exemplo acima o uso de CSS Modules¶

CSS Modules é uma abordagem que permite criar estilos escopados localmente, evitando conflitos globais. Abaixo, segue um exemplo de como usar CSS Modules no mesmo projeto:

1. Crie um arquivo CSS Module¶

No diretório src, crie um arquivo chamado App.module.css com o seguinte conteúdo:

.titulo {
  color: #2c3e50;
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

.botao {
  background-color: #e74c3c;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.botao:hover {
  background-color: #c0392b;
}

2. Importe e use o CSS Module no componente¶

No arquivo App.jsx, importe o CSS Module e aplique as classes:

import React from 'react';
import styles from './App.module.css';

function App() {
  return (
    <div>
      <h1 className={styles.titulo}>Meu App com CSS Modules</h1>
      <button className={styles.botao}>Clique aqui</button>
    </div>
  );
}

export default App;

3. Execute o app¶

Para iniciar o app e ver os estilos aplicados:

npm run dev

Esse exemplo demonstra como usar CSS Modules para criar estilos escopados localmente, garantindo que as classes CSS sejam únicas e evitando conflitos globais.