React — это крутая библиотека для создания пользовательских интерфейсов, но она не имеет собственного подхода к стилизации. Поэтому каждый разработчик должен заранее позаботиться и выбрать удобный для него способ.
По традиции собрали для тебя полезный список стилизаций👌 Лови, сохраняй и делись с друзьями 👇
✔ Встроенный CSS
Визуализирует созданные объекты стиля внутри компонентов в атрибуте style, используя при этом технику React для включения переменной JavaScript внутри JSX.⠀
✔ Обычный CSS
Техника внешнего CSS-стиля создаёт внешний CSS-файл для каждого компонента, выполняет требуемый стиль классов и использует имена классов внутри компонента.⠀
✔ CSS-модули.
Работает как простой CSS-файл но с одним отличием: при импорте каждое имя класса и анимация внутри CSS-модуля привязывается локально к компоненту, который его импортирует. Для использования CSS-модуля нужно создать обычный CSS-файл и импортировать созданный модуль из компонента.⠀
✔ Стилизованные компоненты.
В этом случае программа styled-components стилизует CSS в соответствии с переменной, созданной в JavaScript style components. В этом случае создаётся компонент в виде переменной JavaScript, который уже стилизован с помощью CSS-кода и использует этот стилизованный компонент в основном компоненте.⠀
✔ CSS-препроцессоры
Позволяют использовать Sass, Scss, Less, Stylus и другие препроцессоры в React-приложениях с помощью специальных лоадеры для Webpack.⠀
Если ты уже работаешь с React, то напиши в комментариях, какой способ стилизации используешь.
#methed_про_ит