angular - 如何更改泳道/ngx-charts 中工具提示的背景颜色

Question

使用 ngx-charts 时，我想将工具提示的颜色更改为白色背景，并在深色主题中使用黑色文本。默认设置在浅色和深色主题中提供黑色背景的工具提示和白色文本。

我试过的：

我尝试如下传递 ng-template 工具提示，并向我的组件添加一个类，如下所示：

<ng-template  #tooltipTemplate let-model="model">
  <div class="custom-tooltip" role="tooltip">custom tooltip</div>
</ng-template>

但这不会改变整个工具提示的颜色，而只会改变其中的一部分。

角度版本：12

@swimlane/ngx-charts：17.0.1

更新：

我可以使用以下样式更改样式，但这适用于所有主题，我只想在深色主题中应用这些样式，因此我尝试在内部使用以下样式：host-context(.dark){}，但这没有帮助。任何帮助深表感谢。

::ng-deep ngx-tooltip-content.ngx-charts-tooltip-content.type-tooltip {
  .tooltip-caret.position-top {
    border-top-color: white;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }

  background-color: white;
  color: black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

标签： angular

Answer 1

如果您在他们的演示中指的是黑暗主题，他们正在添加一个.dark类，因此您可以将其放入全局样式文件中：

.dark ngx-tooltip-content.ngx-charts-tooltip-content.type-tooltip {
  .tooltip-caret.position-top {
    border-top-color: white;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
  }

  background-color: white;
  color: black;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}