Uporaba globalnega CSS pri stilizaciji v Reactu

Predpostavimo, da imamo React komponento App, v kateri je div, znotraj divja pa so trije odstavki:

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

Oblikujmo to komponento. Za to v isti mapi src z našo komponento ustvarimo običajno CSS datoteko s slogi styles.css za naše oznake.

V tej datoteki za div ustvarimo razred class1 s slogi:

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

Zdaj dodajmo razred class2 s slogi za prvi odstavek:

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

Razred class3 s slogi za drugi odstavek:

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

In končno ustvarimo razred class4 za zadnji odstavek:

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

S CSS datoteko smo končali. Ostalo je še uporabiti naše CSS sloge, ki smo jih napisali za oznake. Vrnimo se k naši datoteki App.js s komponento.

Prva stvar, ki jo moramo narediti - dodati na začetek datoteke vrstico za uvoz naše datoteke slogov styles.css:

App.jsimport './styles.css';

Zdaj, da uporabimo v komponenti CSS razrede iz datoteke, uporabimo atribut class. Za prvi odstavek smo imeli razred class2, uporabimo ga:

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

Na podoben način dodajmo razrede za preostale oznake. Kot rezultat dobimo naslednjo kodo:

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