Важно: внутри 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 #документация