Metodat e Stilizimit të Komponentëve në React

Ekzistojnë shumë mënyra të ndryshme për të stilizuar komponentët në React. Këtu do të shqyrtojmë disa prej tyre bazë.

Qasja standarde, që mund të aplikojmë, ashtu si në stilizimin e zakonshëm të faqeve në internet - është përdorimi i CSS global. Këtu krijojmë një skedar të jashtëm të përbashkët CSS me stilime. Me këtë qasje, të gjitha emrat e klasave ndodhen në fushën globale të dukshmërisë, gjë që mund të çojë në konflikte midis tyre. Gjithashtu mund të bësh shumë skedarë të vegjël CSS. Kjo qasje është pak efikase për krijimin e aplikacioneve të mëdha të shkallëzueshme.

Qasja tjetër - stilizimi inline, duke e përdorur atë, ne mund të shtojmë stilet CSS inline, ngjashëm me mënyrën si bëhet në HTML të zakonshëm. Në këtë rast do të punojmë me atributin style, duke i kaluar atij vetitë e nevojshme CSS. Zbatimi i një stilizimi të tillë konsiderohet si praktikë e keqe dhe rekomandohet vetëm për shtimin e stilimeve të llogaritura në mënyrë dinamike gjatë renderimit. Kjo mënyrë është e mirë për prototipim të shpejtë të ndërfaqes së një komponenti të veçantë.

Çifti tjetër i mënyrave që do të shqyrtojmë - janë moderne, në rritje të popullaritetit, mënyra efektive të stilizimit. Këto janë pikërisht ato mënyra që rekomandohen të zbatohen për stilizimin e aplikacioneve të mëdha të shkallëzueshme në React.

E para prej tyre - është zbatimi i bibliotekës Styled Components, e cila përdor për stilizim vargje template. Kjo metodë na lejon të shkruajmë CSS të zakonshëm në kod JS, duke përdorur të gjithë funksionalitetin e saj.

Mënyra e dytë - është zbatimi i CSS Modules. Në këtë rast, CSS Module - është një skedar i tillë CSS, në të cilin sipas parazgjedhjes të gjitha emërtimet e klasave dhe animacioneve ndodhen në fushën lokale të dukshmërisë, domethënë janë të disponueshme vetëm brenda komponentit, që e përdor atë.

Në këto dy mënyrat e fundit ne nuk kemi frikë nga konfliktet midis emrave të klasave, sepse ato janë unike - përdoret koncepti i fushës lokale të dukshmërisë. Gjithashtu, kur përdoren ato, nuk ka nevojë për metodologjinë BEM.

Në mësimet në vijim do t'i shqyrtojmë të gjitha mënyrat e paraqitura këtu më në hollësi.