Penggunaan CSS Global untuk Penggayaan dalam React

Katakanlah, kita ada komponen React App, yang mengandungi div, dan di dalam div itu - tiga perenggan:

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

Mari kita gayakan komponen ini. Untuk melakukannya, dalam folder yang sama src dengan komponen kita, buat fail CSS biasa dengan gaya styles.css untuk tag kita.

Dalam fail ini, untuk div, buat kelas class1 dengan gaya:

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

Sekarang tambah kelas class2 dengan gaya untuk perenggan pertama:

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

Kelas class3 dengan gaya untuk perenggan kedua:

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

Akhirnya, buat kelas class4 untuk perenggan terakhir:

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

Kita sudah selesai dengan fail CSS. Tinggal mengaplikasikan gaya CSS yang kita tulis untuk tag. Mari kembali ke fail kita App.js dengan komponen.

Perkara pertama yang mesti kita buat - tambah baris import fail gaya kita styles.css di bahagian atas fail:

import './styles.css';

Sekarang, untuk menggunakan dalam komponen kelas CSS dari fail, gunakan atribut class. Untuk perenggan pertama kita ada kelas class2, aplikasikannya:

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

Dengan cara yang sama, tambah kelas untuk tag yang lain. Hasilnya, kita dapat kod berikut:

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

Buat komponen React yang akan mengandungi div, dan dalam div itu ada dua tombol. Buat fail styles.css dengan gaya CSS untuk tag anda. Aplikasikan gaya yang ditulis kepada tag komponen.