ViewEncapsulation создает проблемы при оформлении старших графиков

Question

Я использую несколько диаграмм в одном представлении, каждый из которых является собственным компонентом. У меня есть LineChartComponent и XRangeChartComponent. Я использую файл стилей с XRangeChartComponent и переопределяю некоторые классы. Но стили не применяются в графике.

После проверки я обнаружил, что файл стилей был изменен на angular, чтобы добавить класс для соответствия теневому DOM. Итак, я использовал инкапсуляцию: ViewEncapsulation.None в XRangeChartComponent. Теперь стили также применяются для LineChartComponent.

Как мне поступить?

У демонстрации, которую я прилагаю, есть 2 линейных графика, но она воспроизводит мою проблему.

https://stackblitz.com/edit/angular-highcharts-styling

Answer 1

Чтобы элементы шаблона могли использовать стили компонентов с инкапсуляцией вида, они должны быть созданы компилятором Angular. Эти элементы создаются сторонней библиотекой, которая напрямую обращается к DOM и поэтому не может быть стилизована таким образом.

Для использования по умолчанию ViewEncapsulationДля стилей следует использовать проколотый комбинатор:

:host ::ng-deep .highcharts-series-0 .highcharts-point {
  fill: #ff0000;
  stroke: #0000ff;
}