Korišćenje globalnog CSS-a za stilizaciju u React-u

Pretpostavimo da imamo React komponentu App, unutar koje se nalazi div, a unutar div-a tri paragrafa:

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

Hajde da stilizujemo ovu komponentu. Za to, u istoj fascikli src gde se nalazi naša komponenta, kreiraćemo običan CSS fajl sa stilovima styles.css za naše tagove.

U ovom fajlu, za div ćemo kreirati klasu class1 sa stilovima:

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

Sada ćemo dodati klasu class2 sa stilovima za prvi paragraf:

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

Klasu class3 sa stilovima za drugi paragraf:

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

I, na kraju, kreirati klasu class4 za poslednji paragraf:

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

Završili smo sa CSS fajlom. Ostalo je da primenimo naše CSS stilove koje smo napisali za tagove. Vratimo se našem fajlu App.js sa komponentom.

Prvo što obavezno moramo da uradimo - dodati na početak fajla liniju za import našeg fajla sa stilovima styles.css:

App.jsimport './styles.css';

Sada, da bismo primenili u komponenti CSS klase iz fajla, upotrebićemo atribut class. Za prvi paragraf imali smo klasu class2, hajde da je primenimo:

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

Na isti način ćemo dodati klase za preostale tagove. Kao rezultat, dobićemo sledeći kod:

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