Question

我正在构建一个Angular 2应用程序，并想知道如何以亲子方式做出最好的造型。类似于Angular 2的“英雄之旅”教程，我有一个顶级的styles.css文件。我的每个组件都有一个关联的styleUrl，指向一个特定于组件的css文件。

我想我可以在styles.css文件中指定全局选项，并根据需要通过component.css文件覆盖它们。然后我发现Angular 2组件是'view encapsulated'，这意味着styles.css的属性不能被覆盖由组件完全。您显然可以将某些组件的“视图封装”设置为“无”，但该组件的css属性会污染其他组件。那不是我想要的。

如果不能覆盖styles.css文件，究竟是什么用途？有没有办法在全局设置css选项并在某些组件中覆盖它们？

示例：Angular 2'Heroes of Heroes'的Plunker示例：

https://angular.io/resources/live-examples/toh-6/ts/plnkr.htmlIn

在styles.css中找到'主样式'，包括h2属性

h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

组件'heroes.component.html'包含一个h2标题'My Heroes'。假设我想用与我应用中的其他h2不同的颜色来设置这个特定的h2标题。我可以进入'heroes.component.css'并指定：

   h2 {
      color: #999;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: lighter;
    }

然而，由于“视图封装”，颜色属性不会被这种方式覆盖。有没有办法在不改变任何其他h2标题的颜色的情况下在本地覆盖主样式？

Angular 2：styles.css的目的是什么？

0 个答案: