Bendrojo CSS naudojimas stilizuojant React

Tarkime, kad turime React komponentą App, kuriame yra div, o viduje div - trys pastraipos:

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

Stilizuokime šį komponentą. Tam toje pačioje aplanke src su savo komponentu sukursime paprastą CSS failą su stiliais styles.css savo žymėms.

Šiame faile div sukursime klasę class1 su stiliais:

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

Dabar pridėkime klasę class2 su stiliais pirmai pastraipai:

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

Klasę class3 su stiliais antrai pastraipai:

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

Ir, galiausiai, sukurkime klasę class4 paskutinei pastraipai:

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

Baigėme su CSS failu. Belieka pritaikyti savo CSS stilius, kuriuos parašėme žymėms. Grįžkime prie savo failo App.js su komponentu.

Pirmas dalykas, kurį privalome padaryti - pridėti failo pradžioje savo stilių failo importo eilutę styles.css:

import './styles.css';

Dabar, kad komponente pritaikytume CSS klases iš failo, naudosime atributą class. Pirmai pastraipai mes turėjome klasę class2, pritaikykime ją:

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

Panašiai pridėkime klases likusioms žymėms. Rezultate gausime šį kodą:

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

Sukurkite React komponentą, kuris bus turi div, o div bus dvi mygtukai. Sukurkite failą styles.css su CSS stiliais savo žymėms. Pritaikykite komponento žymėms parašytus stilius.