Bekerja dengan Gaya CSS dalam Atribut style di React

Dalam pelajaran sebelumnya, ke dalam atribut style kita meneruskan variabel yang berisi objek dengan gaya CSS. Anda tidak perlu menggunakan variabel perantara, tetapi dapat menuliskan objek langsung di dalam atribut - dalam hal ini kita membutuhkan dua pasang kurung kurawal - yang pertama untuk penyisipan JSX, dan yang kedua - untuk objek.

Jadi, mari kita ambil komponen kita tanpa gaya CSS:

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

Sebagai contoh, mari kita tuliskan langsung properti CSS untuk paragraf pertama dari komponen React kita App:

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

Dengan cara yang sama, tambahkan gaya untuk tag lainnya.

Hasilnya, kode komponen akan terlihat seperti berikut:

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

Ambil komponen React yang Anda buat dalam tugas untuk pelajaran sebelumnya. Tambahkan gaya untuk setiap tag langsung dalam atribut style, seperti yang ditunjukkan dalam pelajaran ini.