Способы стилизации React компонентов

Существует множество различных способов стилизации React компонентов. Здесь мы рассмотрим некоторые основные из них.

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

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

Следующие пара способов, которые мы рассмотрим - современные, набирающие популярность, эффективные способы стилизации. Это именно те способы, которые рекомендуется применять для стилизации больших масштабируемых React приложений.

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

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

В этих двух последних способах мы можем не бояться конфликтов между именами классов, ведь они уникальны - используется концепция локальной области видимости. Также при их использовании отпадает необходимость в методологии БЭМ.

В следующих уроках мы рассмотрим все приведенные здесь способы подробнее.