Aula 6

Existem várias maneiras de usar CSS em uma aplicação React. Aqui estão três abordagens populares:

Usando um Arquivo CSS Externo

Crie um arquivo CSS separado e importe-o no componente.

.container {
  background-color: #f9f9f9;
  color: #333;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-family: Arial, sans-serif;
}

  

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="container"div>
      <h1>Olá, React com CSS!</h1>
      <p>Este é um exemplo simples de uso de CSS em React.</p>
    <div>
  );
}

export default App;

  

Usando Inline Styles

Os estilos são definidos como objetos JavaScript e aplicados diretamente nos elementos usando a propriedade style.

import React from "react";

function App() {
  const estiloContainer = {
    backgroundColor: "#f9f9f9",
    color: "#333",
    padding: "20px",
    borderRadius: "8px",
    textAlign: "center",
    fontFamily: "Arial, sans-serif",
  };

  return (
    <div style={estiloContainer}>
      <h1>Olá, React com Estilos Inline!</h1>
      <p>Este é um exemplo simples de estilos inline.</p>
    </div>
  );
}

export default App;

  

Usando CSS Modules

CSS Modules é uma abordagem de estilização que permite escopar automaticamente os estilos de um arquivo CSS para o componente em que são usados. Isso evita conflitos de nomes de classes entre diferentes partes de uma aplicação. Com CSS Modules, os estilos são importados como objetos JavaScript, permitindo aplicar classes diretamente aos elementos HTML, como className={styles.minhaClasse}. Eles são amplamente utilizados em aplicações React e são suportados por ferramentas modernas de build, como Webpack e Vite. Essa técnica é ideal para manter o código organizado e garantir que os estilos sejam isolados por componente, promovendo a reutilização e a modularidade.

/* App.module.css */
.container {
  background-color: #f9f9f9;
  color: #333;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  font-family: Arial, sans-serif;
}

  

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

function App() {
  return (
    <div className={styles.container}>
      <h1>Olá, React com CSS Modules!</h1>
      <p>Os estilos estão escopados ao componente.</p>
    </div>
  );
}

export default App;

  

O Styled Components é uma biblioteca para estilização no React que utiliza o conceito de CSS-in-JS, permitindo que estilos sejam escritos diretamente dentro de componentes JavaScript. Com ele, você cria estilos encapsulados e reutilizáveis ao definir componentes estilizados usando a função styled, fornecida pela biblioteca. Por exemplo, você pode criar um botão estilizado com const Botao = styled.button`background-color: blue; color: white;`;. Esses componentes são utilizados como qualquer outro componente React, garantindo que os estilos sejam aplicados de forma específica sem afetar outros elementos da aplicação. Além disso, o Styled Components suporta dinamicidade, permitindo passar propriedades para alterar estilos de maneira flexível, como background-color: ${props => props.cor || 'blue'};. Essa abordagem combina o poder do JavaScript e do CSS, simplificando a manutenção e organização de estilos em aplicações React modernas.

Instale e veja como funciona em: Documentação do Styled Components

Exemplo

        
import styled from 'styled-components';

const Button = styled.button\`
    background: \${props => (props.primary ? 'blue' : 'gray')};
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
\`;

function App() {
    return (
        <div>
            <Button primary>Primary</Button>
            <Button>Secondary</Button>
        </div>
    );
}
        
    

Veja este artigo que explica sobre o atual cenário do Styled Components: Styled Components: Um adeus ou um até logo?

Emotion é uma biblioteca de estilização em JavaScript que permite criar estilos dinâmicos para componentes React e outros frameworks. Ela combina a flexibilidade do CSS-in-JS com uma API simples e poderosa, oferecendo suporte para estilos globais, temáticos e específicos de componentes. A geração de estilos ocorre em tempo de execução, permitindo que você altere dinamicamente as propriedades de estilo com base em variáveis ou estados do componente. Emotion também suporta a integração com TypeScript e oferece várias formas de uso, como o uso de classes estilizadas (`styled`) ou a aplicação direta de estilos com a função `css`. Essa abordagem facilita a criação de interfaces modernas e altamente personalizáveis.

Instale e veja como funciona em: Documentação do Emotion

Exemplo

        
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = primary => css\`
    background: \${primary ? 'blue' : 'gray'};
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
\`;

function Button({ primary, children }) {
    return <button css={buttonStyle(primary)}>{children}</button>;
}
        
    

Vanilla Extract é uma biblioteca de CSS-in-TypeScript que permite criar estilos com tipagem estática e gerar arquivos CSS em tempo de build. Diferentemente de outras soluções CSS-in-JS, ela elimina a necessidade de aplicar estilos em tempo de execução, melhorando a performance da aplicação. Com Vanilla Extract, os estilos são escopados automaticamente, semelhantes ao CSS Modules, e é possível criar

Instale e veja como funciona em: Documentação do Vanilla Extract

Exemplo

        
// Criar um arquivo chamado styles.css.ts e inserir o código abaixo
import { style } from '@vanilla-extract/css';

export const botao = style({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  border: 'none',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: 'darkblue',
  },
});


        

import React from 'react';
import * as styles from './styles.css';

function Botao() {
  return <button className={styles.botao}>Clique Aqui</button>;
}

export default Botao;
        
    

Tailwind CSS é um framework utilitário de CSS que permite criar interfaces de forma rápida e eficiente usando classes pré-definidas diretamente no HTML. Em vez de escrever estilos personalizados, você utiliza combinações de classes utilitárias para estilizar os elementos, como bg-blue-500 para definir a cor de fundo ou p-4 para adicionar espaçamento interno. Ele promove consistência no design e facilita a manutenção ao evitar a repetição de estilos personalizados. Além disso, Tailwind é altamente configurável, permitindo personalizar temas, adicionar classes personalizadas e reduzir o tamanho final do CSS com a remoção de estilos não utilizados (purge). É uma solução moderna e flexível para construir interfaces responsivas e acessíveis.

Instale e veja como funciona em: Documentação do Tailwind CSS

Exemplo

        
const App = () => {
    return (
        <div>
            <button className="bg-blue-500 text-white p-2 rounded">Primary</button>
            <button className="bg-gray-500 text-white p-2 rounded">Secondary</button>
        </div>
    );
}
        
    

Material UI é uma biblioteca de componentes React baseada nos princípios de design do Google Material Design. Ela fornece uma ampla gama de componentes prontos para uso, como botões, formulários, tabelas e layouts, estilizados de forma consistente e moderna. Além de permitir personalização por meio de temas, Material UI oferece integração com CSS-in-JS, possibilitando a criação de estilos dinâmicos diretamente no JavaScript. A biblioteca também suporta responsividade nativa e práticas de acessibilidade, tornando-se uma escolha popular para desenvolvedores que desejam criar interfaces bonitas, consistentes e fáceis de usar, sem começar do zero.

Instale e veja como funciona em: Documentação do Material-UI

        
import Button from '@mui/material/Button';

const App = () => {
    return (
        <div>
            <Button variant="contained" color="primary">Primary</Button>
            <Button variant="contained" color="secondary">Secondary</Button>
        </div>
    );
}