React'ta Nesneden style Özelliğine Veri Ekleme

CSS stilleri, style özelliği kullanılarak öğelere de eklenebilir. Bu ve sonraki birkaç derste, inline stil verme yöntemlerini inceleyeceğiz.

Artık styles.css dosyasını eklemeyeceğiz, bunun yerine her etiket için stilleri içeren bir nesne şeklinde, doğrudan bileşen dosyasında yazacağımız style özelliğine ilgili değerleri ileteceğiz.

Öyleyse, önceki derste yaptığımız CSS stil olmayan bileşenimizi alalım:

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

Şimdi App.js dosyasında, return komutundan önce, class1 değişkeninde div için CSS stilleri olan bir nesne oluşturalım. Unutmayın, özellik isimleri burada camelCase notasyonunda yazılır ve özellik değerleri tırnak içine alınmalıdır:

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

Şimdi ilk paragraf için stillerle class2 nesnesini ekleyelim:

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

İkinci paragraf için stillerle class3 nesnesi:

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

Ve son olarak sonuncusu için class4:

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

Şimdi, bileşende CSS stillerini uygulamak için style özelliğini kullanacağız. İlk paragraf için class2 değişkenimiz vardı, değer olarak onu iletilim:

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

Benzer şekilde, diğer etiketler için nesnelerden stilleri ekleyelim.

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

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

Önceki dersin görevinde yaptığınız React bileşenini alın, etiketleriniz için CSS stilleri içeren nesneler oluşturun ve bunları ilgili style özelliklerine yerleştirin.