ViewEncapsulation 在设计 highcharts 时产生问题

Question

我在一个视图中使用了几个图表，每个图表都是它自己的组件。我有一个 LineChartComponent 和一个 XRangeChartComponent。我正在使用带有 XRangeChartComponent 的样式文件并覆盖一些 classes。但是样式没有在图表中应用。

检查后发现样式文件被angular修改，追加了一个class以符合阴影DOM。所以，我在XRangeChartComponent中使用了封装：ViewEncapsulation.None。现在，样式也已应用于 LineChartComponent。

我该如何进行？

我附加的演示有 2 个折线图，但它重现了我的问题。

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

Answer 1

为了使模板元素使用带有视图封装的组件样式，它们应该由Angular 编译器创建。这些元素由直接访问 DOM 的第三方库创建，因此不能以这种方式设置样式。

为了与默认 ViewEncapsulation 一起使用，样式应使用 shadow-piercing combinator:

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