Важно: внутри ThemeProvider тему для компонента можно переопределить просто передав ему объект темы в проп theme.
#стили #styledcomponents #важно
#стили #styledcomponents #важно
Рефы в стилизованных компонентах
Рефы со стилизованными компонентами работают так же, как и с обычными: в ref попадает либо ссылка на DOM-элемент, либо экземпляр React-компонента.
#стили #styledcomponents #рефы #документация
Рефы со стилизованными компонентами работают так же, как и с обычными: в ref попадает либо ссылка на DOM-элемент, либо экземпляр React-компонента.
#стили #styledcomponents #рефы #документация
Telegram
React Junior
Рефы
Реф - это прямая ссылка на компонент или на DOM-элемент. Обычно рефы используются для прямого управления DOM-элементами. React обычно не одобряет такой подход, но в некоторых ситуациях он оправдан:
- Управление фокусом, выделение текста или воспроизведение…
Реф - это прямая ссылка на компонент или на DOM-элемент. Обычно рефы используются для прямого управления DOM-элементами. React обычно не одобряет такой подход, но в некоторых ситуациях он оправдан:
- Управление фокусом, выделение текста или воспроизведение…
Безопасность
В некоторых случаях при генерации CSS в стилизованных компонентах могут использоваться данные, введенные на вашем сайте напрямую пользователями (например, вы предлагаете самостоятельно выбрать фоновое изображение). Это может привести к разного рода CSS-инъекциям.
Документация styledComponents рекомендует использовать нативную браузерную функцию CSS.escape для очистки потенциально опасного CSS (полифилл здесь).
#стили #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 #документация
О чем нужно помнить, используя стилизованные компоненты в одном проекте вместе с классическим CSS:
1. Специфичность стилей. Таблица стилей, генерируемая styled-components, добавляется прямо на страницу (в head), поэтому эти стили будут приоритетнее, чем стили из подключенного файла.
2. При стилизации готовых компонентов через styled(MyComponent) нужно не забывать устанавливать полученный проп className как класс DOM-элемента, иначе стили не применятся. Кроме того, можно совмеать обычные классы и this.props.className - но нужно помнить о специфичности.
3. При возникновении конфликтов стилизованных компонентов с основными стилями страницы, можно использовать плагин babel-plugin-styled-components-css-namespace, который добавит сгенерированным стилям пространство имен (дополнительный селектор по идентификатору для повышения специфичности), но лучше подобных ситуаций, конечно, избегать.
#стили #styledcomponents #документация
