我使用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;
}
也覆盖了父进程从导航程序中获取的值,这是否正常?也许我不太了解Shadow DOM ......
Plunker http://plnkr.co/edit/O2r3zKlYj7SH7FWHvWnT?p=preview
(但你必须在你的电脑上启动它,因为我不确定如何制作&#34; @import&#39; /styles/UIComponent.css' ;;&#34; in customer.component.css在plunker中工作,这样它在头文件中导入css文件并使其成为全局。如果你将行更改为&#34; @import&#39; ../ styles / UIComponent.css&#39; ;&#34;(添加了两个点)它不会导入整个css,模拟器会根据需要进行翻译。)
修改: 这是当前Angular2测试版中的一个错误:https://github.com/angular/angular/issues/6449
答案 0 :(得分:1)
这应该做你想要的事情
:host .nav li a {
padding: 5px 10px;
}
这样您就可以将样式的范围限制在子组件中
使用ViewEncapsulation.None
时,这当然不起作用,因为这是关于样式封装的,而None
正是禁用它。