Globālā CSS izmantošana stilošanā React

Pieņemsim, ka mums ir React komponents App, kurā ir div, un divā - trīs rindkopas:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

Iztērēsim šo komponentu. Lai to izdarītu, tajā pašā mapē src ar mūsu komponentu izveidosim parastu CSS failu ar stiliem styles.css mūsu atlasēm.

Šajā failā div izveidosim klasi class1 ar stiliem:

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

Tagad pievienosim klasi class2 ar stiliem pirmajai rindkopai:

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

Klasī class3 ar stiliem otrajai rindkopai:

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

Un, visbeidzot, izveidosim klasi class4 pēdējai rindkopai:

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

Ar CSS failu mēs esam pabeiguši. Atlika piemērot mūsu CSS stilus, kurus mēs uzrakstījām atlases. Atgriezīsimies pie mūsu faila App.js ar komponentu.

Pirmā lieta, kas mums obligāti jādara - jāpievieno faila sākumā importa rinda mūsu stila failam styles.css:

import './styles.css';

Tagad, lai komponentā piemērotu CSS klases no faila, izmantosim atribūtu class. Pirmajai rindkopai mums bija klase class2, piemērosim to:

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

Līdzīgi pievienosim klases pārējām atlases. Rezultātā iegūsim sekojošu kodu:

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

Izveidojiet React komponentu, kas saturēs div, un divā būs divas pogas. Izveidojiet failu styles.css ar CSS stiliem jūsu atlases. Piemērojiet komponenta atlases uzrakstītos stilus.