React komponentlerini stilize etmek usullary

React komponentlerini stilize etmek üçin birmeňzeş dürli usullar bar. Bu ýerde biz olaryň käbir esasy görnüşlerini gözden geçireris.

Ulanyp bolýan standart ýanaşma, adaty web sahypasyny stilize etmekdeki ýaly, global CSS ulanylyp bolar. Bu ýerde biz daşarky umumy bir CSS faýlyny stiller bilen döredýäris. Şeýle ýanaşmada, ähli klass atlary global görünüş meýdanynda bolup, olaryň arasynda çaknyşyklara getirip biler. Şeýle hem birnäçe kiçi CSS faýllaryny döretmek mümkin. Bu ýanaşma uly ölçegli programma enjamlaryny döretmekde az peýdalydyr.

Indiki ýanaşma - inlaýn stilizasiýa, ony ulanyp, biz CSS stillerini inlaýn goşup bileris, adaty HTML-de edilýän ýaly. Bu ýagdaýda biz häsiýet bilen işleris style, ona gerekli bolan CSS aýratynlyklary berip. Şeýle stilizasiýany ulanmak ýaramaz häsiýet hasaplanýar we diňe dinamiki kesgitlenýän stilleri goşmak üçin maslahat berilýär. Bu usul aýratyn komponentiň interfeýsini çalt prototiplemek üçin gowy.

Gözden geçireris indiki bir-iki usul - häzirki zaman, meşhurlygy artýan, netijeli stilizasiýa usullary. Bu esaslandyryşly usullar uly ölçegli React programma enjamlaryny stilize etmek üçin ulanylmalydyr.

Olaryň birinjisi - ulanylýan kitaphana Styled Components, stilizasiýa üçin ulanylýan şablon setirler. Bu usul bizä adaty CSS-i JS kodunda ýazmaga rugsat berýär, onuň ähli funksionallygyny ulanmak.

Ikinji usul - CSS modullaryny ulanmak. Bu ýagdaýda, CSS moduly - şeýle bir CSS faýly, onuň deslapky ýagdaýynda ähli klass we animasiýa atlary ýerli görünüş meýdanynda bolýar, ýagny diňe ony ulanyýan komponent içinde elýeterlidir.

Bu soňky iki usulda biz klas atlarynyň arasyndaky çaknyşyklardan gorkup bilmeris, sebäbi olar ýeke-täk - ýerli görünüş meýdanynyň konsepsiýasy ulanylýar. Şeýle hem olary ulanmakda BEM metodologiýasyna bolan zerurlyk ýok bolýar.

Indiki sapaklarda biz bu ýerde getirilen usullary dowamly gözden geçireris.