React-da stillendirmek üçin Global CSS ulanylmagy

Bizde React komponenty App bardyr diýip pikir edeli, onuň içinde div we div-iň içinde üç abzas bar:

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

Geliň bu komponenti stillendireli. Bunuň üçin, komponentiň ýerleşýän src bukjasyna adaty CSS faýly styles.css dörediň, teglar üçin stiller bilen.

Bu faýlda div üçin class1 klasyny dörediň we stilleri goýuň:

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

Indi birinji abzas üçin class2 klasyny goşalyň we stilleri ýazyň:

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

class3 klasyny ikinji abzas üçin goşalyň we stilleri ýazyň:

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

We, soňunda iň soňky abzas üçin class4 klasyny dörediň:

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

Biz CSS faýly bilen işimizi gutardyk. Ýazylyp galan bolsa, ýazylan CSS stillarymyzy teglara degişli etmek. Komponentiň App.js faýlyna gaýdalyň.

Iň birinjisi, etmelimiz zat - faýlyň başyna stiller faýlymyzy styles.css import etmek üçin setir goşmak:

App.jsimport './styles.css';

Indi, komponentde faýldan CSS klasslaryny ulanmak üçin, class atributyny ulanarys. Birinji abzas üçin bizde class2 klassy bardy, onuň üçin ulanyň:

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

Şuňa meňzeş ýagdaýda galan teglara hem klasslary goşuň. Netijede aşakdaky kody alyarys:

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