​isStyledComponent

Утилитарная функция для определения, является ли компонент стилизованным компонентом.

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

​Получение текущей темы оформления

Мы уже говорили про поддержку и использование тем оформления в styled components. Вкратце повторю: используем компонент ThemeProvider, передаем ему нужную тему, а затем во всех нижележащих компонентах можем извлечь эту актуальную тему из пропа theme.

В документации нашелся еще хук useTheme, который тоже позволяет получать текущую тему из провайдера. Можно использовать как альтернативу пропу theme, если потребуется.

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

​ThemeConsumer

Еще одна альтернатива использованию пропа theme с текущей темой оформления - это компонент ThemeConsumer. Он использует паттерн render prop, то есть рендерит функцию, которая получает в качестве параметра тему и должна вернуть нужную разметку.

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

​Утилиты styled components для тестирования

Вспомогательные функции для тестирования находятся в модуле styled-components/test-utils.

👉 find - находит первый подходящий стилизованный компонент в DOM-дереве (похоже на element.querySelector)

find(document.body, Foo)

👉 find - находит все подходящие стилизованные компоненты в DOM-дереве (похоже на element.querySelectorAll)

👉 enzymeFind- находит стилизованные компоненты внутри обертки, созданной методом mount библиотеки enzyme.

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

Интеграция styled-components с Jest

Подробнее в документации: https://styled-components.com/docs/tooling#jest-integration

Для тестирования стилизованных компонентов с помощью Jest есть специальный пакет jest-styled-components. Он улучшает тестирование снапшотами и предоставляет дополнительную проверку для стилей - toHaveStyleRule.

Для тестирования используем тестовый рендерер React.

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

Подсветка синтаксиса

Когда вы пишете CSS внутри шаблонных строк, то ваш редактор кода, возможно, не сможет обеспечить адекватную подсветку синтаксиса. Чтобы ему помочь, нужно установить дополнительные плагины: https://styled-components.com/docs/tooling#syntax-highlighting

В документации описана текущая ситуация для разных редакторов (Atom, Sublime, VS Code, VIM и т. д.) с указанием нужных плагинов.

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

​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 #документация #инструменты #линтинг