React-da stil vermada qlobal CSS-in istifadesi

Tutaq ki, bizim React komponentimiz App var, icinde div var, div-in icinde ise uc abzas var:

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

Gelin bu komponenti stilize edek. Bunun ucun, komponentimizin oldugu src qovlugunda adi CSS fayli yaradaq styles.css teqlerimiz ucun.

Bu faylda div ucun class1 sinfi yaradaq:

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

Indi birinci abzas ucun class2 sinfi elave edek:

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

Ikinci abzas ucun class3 sinfi:

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

Ve son olaraq sonuncu abzas ucun class4 sinfi yaradaq:

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

CSS fayli ile isimiz bitdi. Qaldi yazdigimiz CSS stillerini teqlere tetbiq etmek. Komponentimizin oldugu App.js fayline qayidaq.

Ilk etmeli etmeliyimiz sey - faylin evveline styl faylimizin import setrini elave etmekdir styles.css:

App.jsimport './styles.css';

Indi komponentde CSS siniflerini tetbiq etmek ucun class atributundan istifade edek. Birinci abzas ucun class2 sinfi var idi, onu tetbiq edek:

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

Eyni usulla qalan teqlere de sinifleri elave edek. Netice olaraq asagidaki kodu alariq:

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