#css #styled-components #shadow-dom
#CSS #стиль-компоненты #теневой дом
Вопрос:
Поэтому я хочу сделать что-то для всего моего приложения, например
div { width: 100%; } и это прекрасно работает. Но как только я начинаю включать сторонние компоненты, которые, как ожидается div , будут иметь другое значение по умолчанию, это начинает вызывать проблемы — мне нужно исправлять любые ситуации, в которых это происходит.
Есть ли какой-либо обходной путь для этого, чтобы компоненты в моем приложении получали некоторый стиль по умолчанию, но он не перетекал в сторонние материалы? Я использую styled-components для применения стилей, но этот вопрос может относиться и к другим библиотекам.
Комментарии:
1. Вы отметили свой вопрос
shadow-dom.lt;divgt;sвнутри ShadowDOM никогда не будет стилизован под глобальный CSS. Это и есть главная цель теневого мира.
Ответ №1:
Если вы можете пометить сторонние компоненты классом, скажем thirdParty . В противном случае, если вы можете добавить оболочку с тегом вокруг сторонних компонентов. Тогда вы можете использовать :not() вот так:
/* your local rules */ div:not(.thirdParty, .thirdParty *) { width: 100%; background-color: lightgreen; text-align: center; } lt;divgt;local onelt;/divgt; lt;div class="thirdParty"gt;third party Parent lt;divgt;---third party child lt;divgt;------third party grand childlt;/divgt; lt;/divgt; lt;/divgt; lt;divgt;local twolt;/divgt;