Usando CSS Global para Estilização em React

Suponha que temos um componente React App, que contém uma div, e dentro da div - três parágrafos:

App.jsfunction App() {
  return (
    <div>
      <p>texto</p>
      <p>texto</p>
      <p>texto</p>
    </div>
  );
}

Vamos estilizar este componente. Para isso, na mesma pasta src do nosso componente, vamos criar um arquivo CSS normal com estilos styles.css para nossas tags.

Neste arquivo, para a div, vamos criar uma classe class1 com os estilos:

styles.css.class1 {
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
}

Agora vamos adicionar a classe class2 com estilos para o primeiro parágrafo:

styles.css.class2 {
  color: orangered;
  font-weight: bold;
}

A classe class3 com estilos para o segundo parágrafo:

styles.css.class3 {
  font-style: italic;
  color: brown;
}

E, finalmente, vamos criar a classe class4 para o último parágrafo:

styles.css.class4 {
  background-color: orange;
  font-weight: bold;
  color: white;
}     

Terminamos com o arquivo CSS. Agora falta aplicar nossos estilos CSS, que escrevemos para as tags. Vamos voltar ao nosso arquivo App.js com o componente.

A primeira coisa que devemos fazer obrigatoriamente - adicionar no início do arquivo uma linha de importação do nosso arquivo de estilos styles.css:

App.jsimport './styles.css';

Agora, para aplicar no componente as classes CSS do arquivo, usaremos o atributo class. Para o primeiro parágrafo tínhamos a classe class2, vamos aplicá-la:

App.js<p class="class2">texto</p>

De maneira similar, vamos adicionar as classes para as outras tags. Como resultado, obteremos o seguinte código:

App.js<div class="class1">
  <p class="class2">texto</p>
  <p class="class3">texto</p>
  <p class="class4">texto</p>
</div>