Начини за стилизирање на React компоненти

Постојат многу различни начини за стилизирање на React компоненти. Овде ќе разгледаме некои основни од нив.

Стандардниот пристап што можеме да го примениме, како и при обична стилизација на веб-страници - е користење на глобален CSS. Овде ние создаваме една надворешна заедничка CSS датотека со стилови. Со овој пристап, сите имиња на класи се наоѓаат во глобалниот опсег, што може да доведе до конфликти меѓу нив. Исто така може да се направат многу мали CSS датотеки. Овој пристап е малку ефикасен при создавање големи скалирани апликации.

Следниот пристап - инлајн стилизација, користејќи го, можеме да додадеме CSS стилови инлајн, слично како што се прави во обичен HTML. Во овој случај ќе работиме со атрибутот style, пренесувајќи му ги потребните CSS својства. Примена на ваква стилизација се смета за лош тон и се препорачува само за додавање на динамички пресметувани стилови за време на рендерирање. Овој начин е добар за брзо прототипирање на интерфејсот на одделна компонента.

Следните неколку начини што ќе ги разгледаме - современи, кои ја зголемуваат популарноста, ефикасни начини за стилизација. Ова се токму тие начини кои се препорачува да се применуваат за стилизирање на големи скалирани React апликации.

Првиот од нив - примена на библиотеката Styled Components, која користи за стилизација шаблонски низи. Овој метод ни овозможува да пишуваме обичен CSS во JS код, користејќи ги сите негови функционалности.

Вториот начин - примена на CSS модули. Во овој случај, CSS модул - е таква CSS датотека во која по стандард сите имиња на класи и анимации се наоѓаат во локалниот опсег, односно достапни се само во компонентата, која ја користи.

Кај овие два последни начини можеме да не се плашиме од конфликти меѓу имињата на класи, бидејќи тие се уникатни - се користи концептот на локален опсег. Исто така при нивното користење отпаѓа потребата од методологијата БЕМ.

Во следните лекции ќе ги разгледаме сите приведени овде начини подетално.