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:

App.jsfunction 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:

styles.css.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:

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

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

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

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

styles.css.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:

App.jsimport './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:

App.js<p class="class2">text</p>

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

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