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 too。

不使用：host/deep/的问题是，我有几个巨大的css文件充当主题（第三方）。我不能通过添加/deep/来修改

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

下面是柱塞链接:https://plnkr.co/edit/5cbm2rjgu7s9q4otqnby?p=preview

Child也是一个，但您可以看到，与其他h2元素相比，它非常突出。

你们谁能帮忙吗？

Answer 1

由于您的 组件位于另一个组件内，因此它将

样式应用于另一个

组件，并将 组件内的标题缩放为1.5em。虽然像

heading2

这样的东西应该像这里显示的那样工作，但我不确定为什么它在angular App中不工作。

在您的情况下，需要这样做才能在子组件上应用样式：

h2 h2 {
    font-size: 1em; 
}

此外，全局样式应该放在styles.css文件中。您不需要shared.css文件，也不需要视图封装。我已经在plunker演示中从您的app.ts中删除了它。

看看更新的柱塞演示。