გლობალური CSS-ის გამოყენება React-ში სტილიზაციისთვის

დავუშვათ, გვაქვს React კომპონენტი App, რომელშიც არის div, ხოლო მის შიგნით - სამი აბზაცი:

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

მოდით, სტილიზაცია მივუტანოთ ამ კომპონენტს. ამისთვის, ჩვენი კომპონენტის იმავე src საქაღალდეში შევქმნათ ჩვეულებრივი CSS ფაილი სტილებით styles.css ჩვენი ტეგებისთვის.

ამ ფაილში div-ისთვის შევქმნათ კლასი class1 სტილებით:

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

ახლა დავამატოთ კლასი class2 სტილებით პირველი აბზაცისთვის:

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

კლასი class3 სტილებით მეორე აბზაცისთვის:

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

და, ბოლოს შევქმნათ კლასი class4 ბოლო აბზაცისთვის:

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

CSS ფაილთან ჩვენ დავამთავრეთ. დარჩენილია გამოვიყენოთ ჩვენი CSS სტილები, რომლებიც ჩვენ დავწერეთ ტეგებისთვის. დავუბრუნდეთ ჩვენს App.js ფაილს კომპონენტთან.

პირველი, რაც ჩვენ აუცილებლად უნდა გავაკეთოთ - დავამატოთ ფაილის დასაწყისში ჩვენი სტილების ფაილის იმპორტის სტრიქონი styles.css:

import './styles.css';

ახლა, რომ კომპონენტში გამოვიყენოთ CSS კლასები ფაილიდან, გამოვიყენოთ ატრიბუტი class. პირველი აბზაცისთვის ჩვენ გვქონდა კლასი class2, გამოვიყენოთ იგი:

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

მსგავსად დავამატოთ კლასები დარჩენილი ტეგებისთვის. შედეგად მივიღებთ შემდეგ კოდს:

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

შექმენით React კომპონენტი, რომელიც შეიცავს div-ს, ხოლო div-ში იქნება ორი ღილაკი. შექმენით ფაილი styles.css CSS სტილებით თქვენი ტეგებისთვის. გამოიყენეთ ტეგებზე დაწერილი სტილები.