Методи за стилизиране на React компоненти

Съществуват много различни начини за стилизиране на React компоненти. Тук ще разгледаме някои основни от тях.

Стандартният подход, който можем да приложим, както при обикновено стилизиране на уеб страници - това е използването на глобални CSS. Тук ние създаваме един външен общ CSS файл със стилове. При този подход, всички имена на класове се намират в глобалното пространство от имена, което може да доведе до конфликти между тях. Също може да се направят множество малки CSS файлове. Този подход е неефективен при създаване на големи мащабируеми приложения.

Следващият подход - инлайн стилизиране, използвайки го, можем да добавим CSS стилове инлайн, подобно на това как се прави в обикновен HTML. В този случай ще работим с атрибута style, подавайки му необходимите CSS свойства. Прилагането на такова стилизиране се счита за лоша практика и се препоръчва само за добавяне на динамично изчислявани по време на рендиране стилове. Този начин е добър за бързо прототипиране на интерфейса на отделен компонент.

Следващите няколко метода, които ще разгледаме - модерни, набиращи популярност, ефективни начини за стилизиране. Това са точно онези методи, които се препоръчват за прилагане при стилизиране на големи мащабируеми React приложения.

Първият от тях - прилагане на библиотеката Styled Components, която използва за стилизиране шаблонни низове. Този метод ни позволява да пишем обикновен CSS в JS кода, използвайки цялата му функционалност.

Вторият метод - прилагане на CSS модули. В този случай, CSS модулът - това е такъв CSS файл, в който по подразбиране всички имена на класове и анимации се намират в локалното пространство от имена, тоест достъпни са само вътре в компонента, който го използва.

При тези два последни метода можем да не се страхуваме от конфликти между имената на класове, тъй като те са уникални - използва се концепцията за локално пространство от имена. Също при тяхното използване отпада необходимостта от методологията БЕМ.

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