O uso de um arquivo CSS para estilizar componentes React tem origem na estrutura tradicional de HTML e CSS. A seguir, um guia passo a passo sobre como utilizar um arquivo CSS para estilizar componentes React:

1. Criar um Arquivo CSS

Para começar, crie um arquivo CSS separado com a extensão .css. Este arquivo pode estar localizado na mesma pasta do componente ou em uma pasta dedicada especificamente para estilos, onde todos os arquivos CSS ficam organizados juntos.

Exemplo:

2. Importar o Arquivo CSS

Utilize a declaração 'import' para importar arquivos CSS no arquivo do componente. Coloque esta declaração de importação no início do arquivo do componente. Dentro das aspas '', especifique o caminho correto do arquivo.

Exemplo:

// Import the CSS file
import './index.css';

Se o arquivo CSS estiver na pasta styles, a declaração de importação terá a seguinte sintaxe:

// Import the CSS file from a folder
import './styles/index.css';

Observação

Utilize a notação de ponto e barra ./ para referenciar um arquivo dentro do mesmo diretório. Para acessar um arquivo fora da pasta atual e navegar até o diretório pai, utilize dois pontos e uma barra ../.

3. Aplicar estilos ao componente

Após importar os estilos, seu componente reconhece a presença do CSS. Consequentemente, é possível utilizar seletores CSS e nomes de classes para estilizar os elementos. A única diferença é que, em aplicações React, utilizamos o atributo className em vez do atributo class utilizado em arquivos HTML.

Exemplo:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Agora podemos usar as classes CSS container, title e description para estilizar os elementos dentro do componente Block.

Adicionar estilização

Neste momento, é possível abrir o arquivo CSS e aplicar estilos aos nomes de classes definidos. Por exemplo, o arquivo index.css pode conter os seguintes estilos:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

Seguindo esses passos, os estilos definidos no arquivo CSS serão aplicados aos elementos correspondentes no componente React.

Código completo do aplicativo: