Memasukkan Data ke dalam Atribut style dari Fail Berasingan dalam React

Kita tidak semestinya menulis objek dengan gaya dalam fail bersama komponen, seperti dalam pelajaran sebelumnya, tetapi boleh mencipta fail berasingan dengan objek gaya kami dan mengimpornya ke dalam komponen yang diperlukan.

Jadi, mari ambil komponen kami tanpa gaya CSS:

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

Mari buat dalam folder src satu fail berasingan styles.js, di mana kami akan tulis objek dengan gaya kami:

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',
};

Jangan lupa di bahagian bawah fail styles.js eksport objek kami sebagai satu objek styles:

export const styles = {
	class1: class1,
	class2: class2,
	class3: class3,
	class4: class4
};

Sekarang import objek styles ke dalam komponen kami:

import { styles } from "./styles";

Sekarang kita boleh menggunakan objek dengan gaya CSS yang kami perlukan dari objek umum styles pada tag kami. Mari gunakan pada perenggan pertama gaya dari objek class2:

<p style={styles.class2}>teks</p>

Dengan cara yang sama, tambah gaya dari objek kepada tag yang lain.

Hasilnya, kod komponen akan kelihatan seperti berikut:

function App() {
	return (
		<div style={styles.class1}>
			<p style={styles.class2}>teks</p>
			<p style={styles.class3}>teks</p>
			<p style={styles.class4}>teks</p>
		</div>
	);
}

Ambil komponen React yang anda buat dalam tugasan untuk pelajaran lepas. Cipta fail berasingan styles.js, di mana akan terdapat objek gaya CSS untuk tag anda, eksport mereka sebagai satu objek, gunakan gaya pada komponen React anda.