Embora estilos inline sejam úteis para estilizações pequenas ou dinâmicas, a maioria das aplicações reais utiliza arquivos CSS externos. Essa abordagem mantém os estilos separados da lógica dos componentes e facilita a manutenção à medida que o projeto cresce.

O React oferece suporte a CSS externo nativamente. É possível escrever CSS normalmente e aplicá-lo aos componentes utilizando nomes de classes, assim como no desenvolvimento web tradicional.

Criando um Arquivo CSS Externo

Primeiro, crie um arquivo CSS e defina seus estilos:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Este arquivo CSS contém uma classe simples que pode ser reutilizada em vários componentes.

Importando CSS em um Componente

Para utilizar os estilos, importe o arquivo CSS no arquivo do seu componente:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

No React, o atributo class é escrito como className, pois class é uma palavra reservada em JavaScript.

Como o CSS Externo Funciona no React

Arquivos CSS são aplicados globalmente por padrão. Qualquer componente pode utilizar uma classe definida em um arquivo CSS importado. Os estilos se comportam da mesma forma que em HTML e CSS padrão. Isso torna o CSS externo familiar e fácil de usar, especialmente para desenvolvedores vindos do desenvolvimento web tradicional.

Quando Usar CSS Externo

CSS externo é uma boa escolha quando:

• Estilos são compartilhados entre vários componentes;
• Layouts tornam-se mais complexos;
• É desejada uma separação clara entre estrutura e estilização.

Para projetos maiores, o CSS externo geralmente resulta em um código mais limpo e fácil de manter.