我将Bootstrap css用作全局样式，然后根据需要在每个组件中对其进行修改，因为index.htm我拥有：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
然后在孩子中添加样式
.nav li a {
padding: 5px 10px;
}
这也将覆盖父级从引导程序为nav li a接收的值，这被认为还可以吗？也许我不太了解Shadow DOM ...
柱塞http://plnkr.co/edit/O2r3zKlYj7SH7FWHvWnT?p=preview
（但您必须在PC上启动它，因为我不确定如何使customer.component.css中的“ @import'/styles/UIComponent.css';”在plunker中工作，这样，它将导入css文件如果将行更改为“ @import'../ styles / UIComponent.css';”（添加了两个点），则不会导入整个CSS，并且模拟器会将其翻译为需要。）
编辑：这是当前Angular2 beta中的错误：https : //github.com/angular/angular/issues/6449
这应该做你想要的
:host .nav li a {
padding: 5px 10px;
}
这样，您将样式范围限制为子组件。
有了ViewEncapsulation.None这并不当然的工作，因为这是关于风格封装和None禁用正是这一点。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句