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

Когда мы объявляем тему в ThemeProvider, то все стилизованные компоненты внутри него автоматически получают эту тему в проп theme. А что делать с обычными (не styled) компонентами? Они ведь тоже могли бы использовать эту тему.

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

https://codesandbox.io/s/styled-components-theming-3-react-junior-32cis?file=/src/App.js

1. Хук useContext

Библиотека styled-components предоставляет переменную ThemeContext, в которой находится нужный контекст.

2. Компонент высшего порядка withTheme.

Функция withTheme получает тему из провайдера и добавляет нашему обычному компоненту проп theme.

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

Важно: внутри ThemeProvider тему для компонента можно переопределить просто передав ему объект темы в проп theme.

#стили #styledcomponents #важно

Рефы в стилизованных компонентах

Рефы со стилизованными компонентами работают так же, как и с обычными: в ref попадает либо ссылка на DOM-элемент, либо экземпляр React-компонента.

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

​Безопасность

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

Документация styledComponents рекомендует использовать нативную браузерную функцию CSS.escape для очистки потенциально опасного CSS (полифилл здесь).

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

​Styled Components + обычный CSS

О чем нужно помнить, используя стилизованные компоненты в одном проекте вместе с классическим CSS:

1. Специфичность стилей. Таблица стилей, генерируемая styled-components, добавляется прямо на страницу (в head), поэтому эти стили будут приоритетнее, чем стили из подключенного файла.

2. При стилизации готовых компонентов через styled(MyComponent) нужно не забывать устанавливать полученный проп className как класс DOM-элемента, иначе стили не применятся. Кроме того, можно совмеать обычные классы и this.props.className - но нужно помнить о специфичности.

3. При возникновении конфликтов стилизованных компонентов с основными стилями страницы, можно использовать плагин babel-plugin-styled-components-css-namespace, который добавит сгенерированным стилям пространство имен (дополнительный селектор по идентификатору для повышения специфичности), но лучше подобных ситуаций, конечно, избегать.

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

​Объект стилей

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

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

Изменение тега

Мы уже разбирали, что тег, который будет использован для стилизованного компонента, можно прямо указать с помощью пропа as.

Но если вы используете функцию styled() для стилизации компонента высшего порядка (HOC), проп as не дойдет до оборачиваемого компонента. В этой ситуации можно использовать проп forwardedAs.

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

​Запрет проброса пропсов

Пропсы, которые установлены для стилизованного компонента, будут проброшены до его HTML-элемента и использованы в качестве атрибутов. Чтобы предотвратить это, нужно добавить символ $ к имени пропа. Такой проп можно использовать в литерале строки, но до HTML-элемента он не дойдет.

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

Babel плагин для стилизованных компонентов

Плагин babel-plugin-styled-components добавляет поддержку серверного рендинга, минификацию стилей и более удобную отладку.

Страница в документации с подробным описанием: https://styled-components.com/docs/tooling#babel-plugin

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

​Запрет проброса пропсов

Мы уже знаем, что можно запретить проброс пропсов стилизованного компонента до самого HTML-узла и превращение их в атрибуты: https://yangx.top/react_junior/176

Для этого нужно просто добавить к имени пропа символ $.

Но есть и более сложный механизм фильтрации таких пропсов: метод shouldForwardProp. Он может пригодиться, если множество компонентов высшего порядка составлены в один и используют один и тот же проп.

У созданного с помощью функции styled() компонента нужно вызвать метод withConfig и передать ему объект конфигурации с полем shouldForwardProp.

🤔 В документации не нашлось других примеров использования метода withConfig.

‼️ Важно: остальные методы компонента, например, attrs должны идти в цепочке после withConfig.

Итак, функция shouldForwardProp - это просто фильтр для пропов. Она получает два аргумента: имя свойства и (опционально) дефолтную функцию валидации, которая отфильтровывает только имена HTML-атрибутов. Внутри shouldForwardProp вы можете разместить любую логику отбора по имени пропа.

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

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

Если вы не хотите создавать отдельный стилизованный компонент, но хотите при этом стилизовать какой-то элемент в той же манере, можно использовать проп css. Его можно установить и для обычного HTML-элемента, и для React-компонента, но чтобы он правильно обрабатывался, нужно использовать плагин для Babel.

Любой элемент, для которого указан проп css под капотом будет превращаться в стилизованный компонент.

Импортировать ничего не нужно, этот проп обрабатывается плагином автоматически.

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

Макрос для Babel

Библиотека styled components также может использоваться в виде babel macro. Макрос - это альтернатива для плагина babel, которая не нуждается во внешней конфигурации и отдельном подключении. Подробнее о макросах Babel в документации.

Если ваш проект создан с помощью create-react-app, то он уже поддерживает использование макросов из коробки. В ином случае сначала нужно подключить babel-plugin-macros.

Макрос нужно импортировать из 'styled-components/macro', а затем можно использовать вместо плагина.

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

Использование вместе с TypeScript

При установке пропа css для произвольных элементов TypeScript будет выдавать ошибки. Чтобы избежать этого, нужно установить пакет @types/styled-components, а также прописать этот импорт в проекте:

import {} from 'styled-components/cssprop'

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

​StyleSheetManager

StyleSheetManager - вспомогательный компонент для настройки процесса обработки стилей. Выглядит как обычный React-компонент, принимает пропы для разных настроек. Например, можно отменить добавление вендорных префиксов к стилям (по умолчанию они добавляются).

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