twitter-bootstrap - 生成具有所需颜色的图表时出现问题，即不显示指定的颜色

Question

我在加载具有指定/所需颜色的气泡图时遇到了一些问题。我尝试了 POC，它工作正常，但是当图表加载实际应用程序时，颜色发生了变化，即其他一些 Bootstrap css 类覆盖了指定的并且气泡/圆圈呈现为黑色。我在 index.html 中使用以下 Bootstrap 引用。

 <!-- Bootstrap and JQuery -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

如果您注意到 plunker 中的 POC，会生成白色的圆圈，这是必需的，但如果您注意到快照，它会更改/显示为黑色。我如何覆盖并使其正常工作？

Plunker

angular2组件生成气泡图的代码可以引用plunker指定链接

Answer 1

@Yakov Fain 提到的选项可以工作，但使用 ViewEncapsulation.None 有其他副作用，所以如果你想走那条路，请阅读那些。

这个问题出现了before使用 Angular 2 和 d3。您可以使用阴影穿孔样式选择器，例如

:host /deep/ h3 {
  font-style: italic;
}

We can use the /deep/ selector to force a style down through the child component tree into all the child component views. The /deep/ selector works to any depth of nested components, and it applies both to the view children and the content children of the component. The /deep/ selector also has the alias >>>. We can use either of the two interchangeably.

在此处阅读有关这些特殊选择器的更多信息: https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors