​Styled Theming

Еще один способ создавать темы для стилизованных компонентов - использовать пакет styled-theming.

Тут немного другой подход. Мы также создаем объект темы с помощью функции theme, но внутри компонента уже не нужно вытаскивать эту тему из пропа, достаточно просто указать ссылку на саму тему. Это здорово упрощает код, особенно, если вы активно используете темы.

Если интересно, можно почитать статью: https://jamie.build/styled-theming.html

#стили #styledcomponents #документация #примерыкода #ссылки

​Линтинг стилизованных компонентов

Чтобы использовать stylelint для стилизованных компонентов, нужно доустановить пару пакетов:

👉 stylelint-processor-styled-components, чтобы извлекать стили из компонентов. Процессор игнорирует все файлы, которые не содержат стилизованных компонентов.
👉 stylelint-config-styled-components, чтобы отключить правила, которые конфликтуют с библиотекой.

Процессор и расширение нужно поключить в соответствующие секции файла .stylelintrc.

Важно: Функция —fix не поддерживается.

#стили #styledcomponents #документация #инструменты #линтинг

Линтинг в процессе сборки

Чтобы добавить линтинг стилизованных компонентов в процесс сборки кода (а не просто запускать через командную строку), можно использовать специальный лоадер для webpack: stylelint-custom-processor-loader.

#стили #styledcomponents #документация #инструменты #линтинг