Načini stilizovanja React komponenti

Postoji mnogo različitih načina stilizovanja React komponenti. Ovde ćemo razmotriti neke od osnovnih.

Standardni pristup, koji možemo primeniti, kao i kod uobičajenog stilizovanja veb stranica - je korišćenje globalnog CSS. Ovde kreiramo jedan spoljni zajednički CSS fajl sa stilovima. Ovim pristupom, sva imena klasa se nalaze u globalnom opsegu vidljivosti, što može dovesti do konflikata između njih. Takođe možete napraviti mnogo malih CSS fajlova. Ovaj pristup je malo efikasan pri kreiranju velikih skalabilnih aplikacija.

Sledeći pristup - inlajn stilizovanje, koristeći ga, možemo dodati CSS stilove inlajn, slično kao što se to radi u običnom HTML-u. U ovom slučaju ćemo raditi sa atributom style, prosleđujući mu potrebne CSS osobine. Primena takve stilizacije se smatra lošim tonom i preporučuje se samo za dodavanje dinamički izračunatih stilova tokom renderovanja. Ovaj način je dobar za brzo prototipiranje interfejsa pojedinačne komponente.

Sledeći par načina, koje ćemo razmotriti - moderni, popularni, efikasni načini stilizovanja. Ovo su upravo oni načini koji se preporučuju za stilizovanje velikih skalabilnih React aplikacija.

Prvi od njih - primena biblioteke Styled Components, koja koristi za stilizaciju šablonske stringove. Ova metoda nam omogućava da pišemo običan CSS u JS kodu, koristeći celu njegovu funkcionalnost.

Drugi način - primena CSS modula. U ovom slučaju, CSS modul - je takav CSS fajl, u kojem podrazumevano sva imena klasa i animacija se nalaze u lokalnom opsegu vidljivosti, to jest dostupni su samo unutar komponente, koja ga koristi.

Kod ova dva poslednja načina možemo ne bojati se konflikata između imena klasa, jer su ona jedinstvena - koristi se koncept lokalnog opsega vidljivosti. Takođe pri njihovoj upotrebi otpada potreba za metodologijom BEM.

U narednim lekcijama ćemo detaljnije razmotriti sve navedene ovde načine.