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:

function 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:

.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:

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

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

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

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

.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:

import './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:

<p class="class2">texto</p>

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

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

Crie um componente React que irá conter uma div, e na div haverá dois botões. Crie um arquivo styles.css com estilos CSS para suas tags. Aplique às tags do componente os estilos escritos.