Penggunaan CSS Global untuk Styling di React

Misalkan kita memiliki komponen React App, yang berisi div, dan di dalam div tersebut - tiga paragraf:

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

Mari kita styling komponen ini. Untuk itu, di folder yang sama src dengan komponen kita, buatlah file CSS biasa dengan gaya styles.css untuk tag kita.

Dalam file ini, untuk div buatlah kelas class1 dengan gaya:

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

Sekarang tambahkan kelas class2 dengan gaya untuk paragraf pertama:

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

Kelas class3 dengan gaya untuk paragraf kedua:

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

Dan terakhir, buat kelas class4 untuk paragraf terakhir:

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

Kita sudah selesai dengan file CSS. Tinggal menerapkan gaya CSS yang kita tulis untuk tag-tag tersebut. Kembali ke file kita App.js dengan komponen.

Pertama, yang harus kita lakukan - tambahkan di awal file baris impor file gaya kita styles.css:

import './styles.css';

Sekarang, untuk menerapkan di komponen kelas CSS dari file, gunakan atribut class. Untuk paragraf pertama kita memiliki kelas class2, terapkan itu:

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

Dengan cara yang sama tambahkan kelas untuk tag lainnya. Hasilnya kita dapatkan kode berikut:

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

Buatlah komponen React yang akan berisi div, dan di dalam div akan ada dua tombol. Buat file styles.css dengan gaya CSS untuk tag Anda. Terapkan gaya yang ditulis ke tag komponen.