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:
function 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:
.class1 {
width: 200px;
border: 2px solid brown;
padding: 10px;
text-align: center;
}
Sada ćemo dodati klasu class2 sa
stilovima za prvi paragraf:
.class2 {
color: orangered;
font-weight: bold;
}
Klasu class3 sa
stilovima za drugi paragraf:
.class3 {
font-style: italic;
color: brown;
}
I, na kraju, kreirati klasu class4 za
poslednji paragraf:
.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:
import './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:
<p class="class2">tekst</p>
Na isti način ćemo dodati klase za preostale tagove. Kao rezultat, dobićemo sledeći kod:
<div class="class1">
<p class="class2">tekst</p>
<p class="class3">tekst</p>
<p class="class4">tekst</p>
</div>
Kreirajte React komponentu koja će
sadržati div, a u div-u će biti dva
dugmeta. Kreirajte fajl styles.css
sa CSS stilovima za vaše tagove. Primenite
napisane stilove na tagove komponente.