Одно из самых популярных решений CSS-in-JS — это styled-components, и одной из его потрясающих функций является возможность легко создавать темы для ваших приложений React. Существует много способов работы с темами, и в этой статье я поделюсь своим методом, который основан на создании повторно используемых вспомогательных функций, чтобы упростить процесс и уменьшить объем кода, задействованного в стилях. Мы также коснемся использования полированной библиотеки, чтобы добавить изюминку и дополнительную функциональность в тему styled-components.
Моя мотивация для этого шаблона заключалась в том, чтобы добиться той же простоты, которую предлагают Sass и Stylus для написания функционального CSS; Я считаю, что комбинация styled-components и polished очень близка.
Репозиторий проекта доступен по адресу https://github.com/garethpbk/styled-components-theming.git.
Настройка проекта и темы
Настройте новый проект create-react-app и добавьте зависимости (или добавьте в существующий проект) — продолжайте и удалите все, кроме App.js и index.js, в /src:
Темы styled-components работают с Context API через компонент <ThemeProvider />. В index.js импортируйте компонент и тему и оберните <App />:
<ThemeProvider /> принимает одну опору, объект с именем theme; создайте файл theme.js, который был импортирован, и настройте значения:
Давайте используем цвета и размеры нашей темы в <App /> в стилизованном компоненте:
Хм. Синтаксис какой-то… громоздкий — мы каждый раз используем имя свойства объекта темы реквизита. Как мы можем упростить это?
Создание вспомогательных функций
Функции в помощь! Давайте создадим несколько повторно используемых вспомогательных функций, чтобы упростить доступ к значениям темы. В theme.js:
Теперь мы можем импортировать и использовать эту функцию в любое время, когда нам нужен цвет в стилизованном компоненте:
Проделаем то же самое с размерами:
Хорошо, может быть, сейчас дело не в том, что намного меньше кода, но этот шаблон действительно работает, когда вы имеете дело со сложными темами и вложенными объектами темы. Он предоставляет вам всю мощь функций JavaScript для управления стилем темы.
Пицца с полировкой
Наконец, давайте воспользуемся некоторыми функциями polished через вспомогательные функции в theme.js:
В <App /> давайте применим это к новому стилизованному компоненту:
Если вы использовали функцию облегчения Sass, она должна показаться вам знакомой.
Почему мы не можем просто импортировать lighten прямо в компонент? Попробуй - ${lighten(getColor('secondary'), '0.2')} - неправильно анализируется. Сохранение его в теме означает, что он импортируется из polished только один раз и не зависит от наличия прямого доступа к getColor в компоненте.
Еще один — давайте воспользуемся функцией rgba из полированного для легко управляемых теней текста:
rgba автоматически преобразует шестнадцатеричные значения в значения rgb (точно так же, как одноименная функция Sass). Это здорово, потому что это означает, что нам не нужно повторно объявлять значения цвета в разных форматах; наличие параметров по умолчанию также является хорошим инструментом для установки базовых значений. Добавить к <Content />:
Это завершает мой метод создания тем styled-components; функции делают мощную, бесконечно расширяемую систему. В примере проекта вы также найдете простой компонент сетки, созданный со значениями точки останова в теме.
