Verileri React'ta Ayrı Bir Dosyadan style Özniteliğine Yerleştirme

Stil nesnelerini, bir önceki dersteki gibi bileşen dosyasının içine yazmak zorunda değiliz, stil nesnelerimizle ayrı bir dosya oluşturup onları istediğimiz bileşene aktarabiliriz.

Şimdi, CSS stilimiz olmayan bileşenimizi alalım:

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

src klasöründe ayrı bir styles.js dosyası oluşturalım ve içine stil nesnelerimizi yazalım:

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

styles.js dosyasının altına nesnelerimizi tek bir styles nesnesi olarak aktarmayı unutmayalım:

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

Şimdi styles nesnesini bileşenimize aktaralım:

import { styles } from "./styles";

Artık genel styles nesnesinden ihtiyacımız olan CSS stil nesnesini etiketlerimize uygulayabiliriz. İlk paragrafa class2 nesnesinden stilleri uygulayalım:

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

Benzer şekilde, diğer etiketlere de nesnelerden stilleri ekleyelim.

Sonuç olarak, bileşenin kodu aşağıdaki gibi görünecektir:

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>
	);
}

Önceki dersteki görev için yaptığınız React bileşenini alın. Etiketleriniz için CSS stil nesnelerinin bulunacağı ayrı bir styles.js dosyası oluşturun, bunları tek bir nesne olarak aktarın, stilleri React bileşeninize uygulayın.