Memasukkan data ke dalam atribut style dari file terpisah di React

Kita tidak harus menulis objek dengan gaya di file dengan komponen, seperti di pelajaran sebelumnya, tetapi dapat membuat file terpisah dengan objek gaya kita dan mengimpornya ke komponen yang diperlukan.

Jadi, mari kita ambil komponen kita tanpa gaya CSS:

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

Mari buat di folder src file terpisah styles.js, di mana kita akan menulis objek dengan gaya kita:

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 bagian bawah file styles.js untuk mengekspor objek kita sebagai satu objek styles:

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

Sekarang impor objek styles ke komponen kita:

import { styles } from "./styles";

Sekarang kita dapat menerapkan objek dengan gaya CSS yang kita butuhkan dari objek umum styles ke tag kita. Mari terapkan gaya dari objek class2 ke paragraf pertama:

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

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

Hasilnya, kode komponen akan terlihat seperti berikut:

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

Ambil komponen React yang Anda buat dalam tugas untuk pelajaran sebelumnya. Buatlah file terpisah styles.js, yang akan berisi objek gaya CSS untuk tag Anda, ekspor sebagai satu objek, terapkan gaya ke komponen React Anda.