Menyisipkan Data ke dalam Atribut style daripada Objek dalam React

Gaya CSS untuk elemen juga boleh ditambah menggunakan atribut style. Dalam ini dan beberapa pelajaran seterusnya, kita akan melihat kaedah penggayaan sebaris.

Sekarang kita tidak akan menyambungkan fail styles.css, sebaliknya kita akan menghantar nilai yang sepadan ke atribut style dalam bentuk objek dengan gaya untuk setiap tag, yang akan kita tulis terus dalam fail komponen.

Jadi, mari ambil komponen kita tanpa gaya CSS, yang kita buat dalam pelajaran lepas:

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

Mari dalam fail App.js sebelum arahan return, kita cipta objek dengan gaya CSS untuk div dalam pembolehubah class1. Ingat, nama sifat di sini ditulis dalam camelCase notasi, dan nilai sifat perlu diletakkan dalam tanda petik:

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

Sekarang tambah objek class2 dengan gaya untuk perenggan pertama:

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

Objek class3 dengan gaya untuk perenggan kedua:

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

Akhirnya, class4 untuk yang terakhir:

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

Sekarang, untuk menggunakan kelas CSS dalam komponen, gunakan atribut style. Untuk perenggan pertama kita ada pembolehubah class2, hantarkannya sebagai nilai:

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

Dengan cara yang sama, tambah gaya daripada objek untuk tag yang lain.

Hasilnya, kod komponen akan kelihatan 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 dalam tugasan untuk pelajaran lepas, cipta objek dengan gaya CSS untuk tag anda, letakkannya dalam atribut style yang sepadan.