Я разрабатываю библиотеку интерактивной визуализации данных, и наследование CSS причиняет мне некоторую боль. В частности, я бы хотел, чтобы мои интерактивные графики можно было встраивать в HTML-документы (например, bookdown) без наследования стилей родительского элемента, поскольку это может испортить мой макет. Я использую служебные классы Tailwind, и у меня возникли проблемы, когда стили родительского компонента переопределяли стили моих графиков, поскольку они имели более высокую специфичность.
Есть ли способ создать барьер между стилями родительский компонент и мои компоненты, чтобы мои компоненты не наследовали ни один из родительских стилей? В частности, тот, который будет работать с служебными классами Tailwind? Предположим, у меня есть следующий HTML:
Я не хочу, чтобы что-либо ниже моего корневого компонента наследовало стили родительского компонента (и его предков). Согласно аналогичному сообщению и этой статье, я попробовал следующее:
Код: Выделить всё
.my-root-component {
all: revert;
* {
all: revert;
}
}
Кажется, это частично работает, однако оно также переопределяет служебные классы Tailwind дочерних компонентов. Есть идеи, как создать барьер для наследования, сохранив при этом возможность добавлять классы Tailwind?
Подробнее здесь:
https://stackoverflow.com/questions/793 ... h-tailwind
Мобильная версия