从大孩子

Question

考虑这种情况：

app.component.html

<app-header></app-header>
<div class="theme">
  <router-outlet></router-outlet>
</div>

app.component.scss

.theme {
  ...   
  .just-test {
    color: red;
  }
}

现在，当组件 grandChild.component.html （grandchild of App component）将通过路由加载时（ grandChild 的父组件实际上是加载的组件，包含grandChild的那个，它似乎无法访问类"just-test"。

grandChild.component.html

<div class="just-test">Hello mate</div>

是否可以访问“ just-test ”以及如何？

Answer 1

没有。因为每个组件都封装了css。看看这里：https://angular.io/guide/component-styles

但是，您可以在应用的根文件夹中的styles.scss（或style.css）中设置此规则。那些没有封装。

Answer 2

您可以在grandChild.component.scss内使用switch。

您应用的任何规则都将覆盖原始的类定义。