Angular 2，包含嵌套组件的所有组件的全局css文件

Question

<div>
  <h2>Hello {{name}}</h2>
  <first> first comp <child> Child </child> </first>
  <second> second comp </second>
</div>

，是3个组成部分。我试图在所有组件中放置一个通用的css文件。我能够为除组件之外的所有其他人做到这一点。我尝试了封装：ViewEncapsulation.None也是。

不使用的问题：host / deep /是我有几个巨大的css文件作为主题（第三方）。我无法通过添加/ deep /来修改它

我也尝试在index.html中包含css文件，但我看到了同样的问题。对于嵌套组件，未应用css。

以下是Plunker链接：https://plnkr.co/edit/5cBM2RJgu7s9Q4oTQNBY?p=preview

孩子也是一个但你可以看到它与其他h2元素相比更突出。

请你帮忙吗？

Answer 1

由于您的<child>组件位于另一个组件内，因此它会在另一个<h2>上应用<h2>的样式，并按<child>缩放1.5em组件内的标题。虽然<h2><h2>Heading 2</h2></h2>之类的内容应该如图所示here，但我不确定它为什么在角度应用中不起作用。

在您的情况下，您需要执行此操作才能在子组件上应用样式：

h2 h2 {
    font-size: 1em; 
}

此外，您的全局样式应该放在styles.css文件中。您不需要shared.css文件，也不需要View Encapsulation。我在plunker演示中将其从app.ts中删除了。

查看更新的PLUNKER DEMO。

Answer 2

尝试将封装无添加到app.component并将你的样式包含到styleUrls：app.component.ts中的['']