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

Постоји мноштво различитих начина стилизовања React компоненти. Овде ћемо размотрити неке од основних.

Стандардни приступ, који можемо применити, као и при обичном стилизовању веб страница - то је коришћење глобалног CSS. Овде креирамо један спољашњи заједнички CSS фајл са стиловима. При овом приступу, сва имена класа се налазе у глобалном опсегу видљивости, што може довести до конфликта међу њима. Такође можемо направити много малих CSS фајлова. Овај приступ је неефикасан при креирању великих скалабилних апликација.

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

Следећи пар начина, које ћемо размотрити - модерни, популарни, ефикасни начини стилизовања. То су управо они начини који се препоручују за стилизовање великих скалабилних React апликација.

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

Други начин - примена CSS модула. У овом случају, CSS модул је такав CSS фајл у коме подразумевано сва имена класа и анимација се налазе у локалном опсегу видљивости, то јест доступна су само унутар компоненте, која га користи.

Код ова два последња начина не морамо да се плашимо конфликта између имена класа, јер су они јединствени - користи се концепт локалног опсега видљивости. Такође при њиховој употреби отпада потреба за методологијом БЕМ.

У следећим лекцијама ћемо детаљније размотрити све наведене овде начине.