Menyisipkan Data ke Atribut style dari Objek di React

Gaya CSS ke elemen juga dapat ditambahkan dengan menggunakan atribut style. Dalam pelajaran ini dan beberapa pelajaran berikutnya, kita akan membahas metode styling inline.

Sekarang kita tidak akan menyambungkan file styles.css, melainkan meneruskan nilai yang sesuai ke atribut style dalam bentuk objek dengan gaya untuk setiap tag, yang akan kita tulis langsung di file komponen.

Jadi, mari ambil komponen kita tanpa gaya CSS, yang kita buat di pelajaran sebelumnya:

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

Mari di file App.js sebelum perintah return buat sebuah objek dengan gaya CSS untuk div dalam variabel class1. Ingat bahwa nama properti di sini ditulis dalam notasi camelCase, dan nilai properti perlu diberi tanda kutip:

const class1 = {
	width: '200px',
	border: '2px solid brown',
	padding: '10px',
	textAlign: 'center'
};

Sekarang tambahkan objek class2 dengan gaya untuk paragraf pertama:

const class2 = {
	color: 'orangered',
	fontWeight: 'bold'
}

Objek class3 dengan gaya untuk paragraf kedua:

const class3 = {
	fontStyle: 'italic',
	color: 'brown',
}

Dan akhirnya class4 untuk yang terakhir:

const class4 = {
	backgroundColor: 'orange',
	fontWeight: 'bold',
	color: 'white',
}

Sekarang, untuk menerapkan kelas CSS di komponen, gunakan atribut style. Untuk paragraf pertama kita punya variabel class2, mari teruskan sebagai nilainya:

<p style={class2}>text</p>

Dengan cara yang sama, tambahkan gaya dari objek untuk tag lainnya.

Hasilnya, kode komponen akan terlihat seperti berikut:

function App() {
	const class1 = {
		width: '200px',
		border: '2px solid brown',
		padding: '10px',
		textAlign: 'center',
	};

	const class2 = {
		color: 'orangered',
		fontWeight: 'bold',
	};

	const class3 = {
		fontStyle: 'italic',
		color: 'brown',
	};

	const class4 = {
		backgroundColor: 'orange',
		fontWeight: 'bold',
		color: 'white',
	};

	return (
		<div style={class1}>
			<p style={class2}>text</p>
			<p style={class3}>text</p>
			<p style={class4}>text</p>
		</div>
	);
}

Ambil komponen React, yang Anda buat di tugas untuk pelajaran sebelumnya, buat objek dengan gaya CSS untuk tag Anda, tempatkan di atribut style yang sesuai.