html - 超出组件范围的 Angular2+ 样式父级

Question

是否可以执行以下操作......

app.component.html

   <app-nav></app-nav>
    <div class="page-wrapper">
      <div class="page-content clearfix">
        <router-outlet></router-outlet>
       </div>
     </div>

当路由到特定的 Component 并在转到其他 后，我可以将以下 CSS 应用于 page-wrapper 和 page-content 类吗>Component 按原样删除... ?

CSS

.page-content {
  margin-bottom: 0px;
}

@media screen and (min-width: 1367px) {
  .page-wrapper {
    width: 100%;
  }
}

我也尝试了 View Encapsulation 选项(无)，但这将样式应用于始终是它们的 header ......即使我路由到其他 Component。

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})

Answer 1

您走在正确的轨道上，需要为 page-wrapper 设置样式和 page-content来自 <router-outlet> 中显示的每个组件通过使用 ViewEncapsulation.None .因此，通过这样编写样式，每次父元素(page-wrapper 和 page-content)的样式都会根据组件进行覆盖。

@Component({
    selector: 'component-x',
    encapsulation: ViewEncapsulation.None,
    styles: [`
      .page-wrapper, .page-content{
          background-color: red;
      }
    `]
});


@Component({
    selector: 'component-y',
    encapsulation: ViewEncapsulation.None,
    styles: [`
      .page-wrapper, .page-content{
          background-color: green;
      }
    `]
});