React'te Stilleme Yaparken Global CSS Kullanımı

Diyelim ki, içinde bir div ve div'in içinde üç paragraf bulunan bir React bileşenimiz App var:

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

Haydi bu bileşeni stilleyelim. Bunun için, bileşenimizle aynı src klasöründe etiketlerimiz için stiller içeren normal bir CSS dosyası styles.css oluşturalım.

Bu dosyada div için class1 sınıfını ve stilleri oluşturalım:

.class1 {
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
}

Şimdi ilk paragraf için stillerle birlikte class2 sınıfını ekleyelim:

.class2 {
	color: orangered;
	font-weight: bold;
}

İkinci paragraf için stillerle birlikte class3 sınıfı:

.class3 {
	font-style: italic;
	color: brown;
}

Ve son olarak son paragraf için class4 sınıfını oluşturalım:

.class4 {
	background-color: orange;
	font-weight: bold;
	color: white;
}

CSS dosyası ile işimiz bitti. Geriye yazdığımız CSS stillerini etiketlere uygulamak kaldı. Bileşenimizin olduğu App.js dosyasına dönelim.

Yapmamız gereken ilk ve zorunlu şey - dosyanın başına stil dosyamız styles.css için içe aktarma satırı eklemek:

import './styles.css';

Şimdi, bileşende CSS dosyasındaki sınıfları uygulamak için class özniteliğini kullanacağız. İlk paragraf için class2 sınıfımız vardı, onu uygulayalım:

<p class="class2">text</p>

Benzer şekilde kalan etiketler için de sınıfları ekleyelim. Sonuçta aşağıdaki kodu elde ederiz:

<div class="class1">
	<p class="class2">text</p>
	<p class="class3">text</p>
	<p class="class4">text</p>
</div>

İçinde bir div ve div'in içinde iki buton bulunan bir React bileşeni oluşturun. Etiketleriniz için CSS stilleri içeren bir styles.css dosyası oluşturun. Yazdığınız stilleri bileşen etiketlerine uygulayın.