我里面有一个Home组件：
<alert type="info">Hello from ng2-bootstrap</alert>
在我的home.style.scss内部，我有以下内容：
:host .alert {
background-color: green;
}
应该将背景颜色更改为绿色，但不能更改为绿色。
上面的CSS代码将产生以下样式：
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
最终的HTML如下所示：
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
我不知道这里是什么问题，但是我认为选择器是错误的。我希望最终的选择器是：
[_nghost-wjn-3] .alert
代替：
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
换句话说，为什么没有_ngcontent-wjn-3属性<div class="alert">...</div>？
也许我整件事做错了。我要实现的是自定义<alert>ng2-bootrap库（https://github.com/valor-software/ng2-bootstrap）中提供的各个引导程序组件的CSS（在上面的代码中）。自定义组件（<home>在上面的代码中）。
我在home组件中使用默认的视图封装（模拟）。
我该怎么办？
我自己弄清楚了。这就是我想要的：
:host /deep/ .alert {
background-color: green;
}
上面的代码将产生以下内容：
[_nghost-wjn-3] .alert {
background-color: green;
}
这样，我可以在我的组件中修改引导程序类的默认样式（在本例中为.alert）<home>。
资料来源：https : //angular.io/docs/ts/latest/guide/component-styles.html
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句