Penggunaan Gaya CSS dalam Atribut Style di React

Dalam pelajaran sebelumnya, kita menghantar pembolehubah yang mengandungi objek dengan gaya CSS kepada atribut style. Kita boleh tidak menggunakan pembolehubah perantaraan, tetapi menulis objek secara terus dalam atribut - dalam kes ini kita memerlukan dua pasang kurung kerawang - yang pertama untuk sisipan JSX, dan yang kedua - untuk objek.

Jadi, mari kita ambil komponen kita tanpa gaya CSS:

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

Sebagai contoh, mari kita tentukan sifat CSS secara langsung untuk perenggan pertama komponen React kita App:

<p style = {{
	color: 'orangered',
	fontWeight: 'bold' }}>
	teks
</p>

Dengan cara yang sama, mari tambah gaya untuk tag yang lain.

Hasilnya, kod komponen akan kelihatan seperti berikut:

function App() {
	return (
		<div style = {{
			width: '200px',
			border: '2px solid brown',
			padding: '10px',
			textAlign: 'center' }}>
			<p style={{
				color: 'orangered',
				fontWeight: 'bold' }}>
				teks
			</p>
			<p style = {{
				fontStyle: 'brown',
				color: 'brown' }}>
				teks
			</p>
			<p style = {{
				backgroundColor: 'orange',
				fontWeight: 'bold',
				color: 'white' }}>
				teks
			</p>
		</div>
	);
}

Ambil komponen React yang anda buat dalam tugas untuk pelajaran lepas. Tambahkan gaya untuk setiap tag secara terus dalam atribut style, seperti yang ditunjukkan dalam pelajaran ini.