使用角度(mat-sidenav)中的子组件覆盖父样式

Question

是否有一种方法可以覆盖某些内容组件中的侧边导航内容样式。

我的side nav代码下面有margin: 20px;，我只想通过加载到内容部分的几个组件来覆盖它(例如: Map)。一种方法是删除页边距并将其单独应用于除Map之外的所有组件。但我想知道是否有一种方法可以在样式层次结构中向上移动，并从子组件中覆盖它。这是与\deep\相反的方向。

main {
  margin: 20px;
}


<mat-sidenav-container class="example-sidenav-container" autosize>
<mat-sidenav [opened]="true" #sidenav [mode]="sideNavMode">
  <mat-nav-list>
    <sidenav-list-item *ngFor="let navitem of navigationItems" [collapsed]="sidenavOpened" [navItem]="navitem"></sidenav-list-item>
  </mat-nav-list>
</mat-sidenav>
<main>
  <ng-content></ng-content>
</main>

这是我正在讨论的一个示例。请参见map组件。它应该覆盖父css。https://stackblitz.com/edit/angular-material-sidenav-generate-nav-mov9me?file=src/app/map/map.component.css

Answer 1

最好的方法是在:host选择器中包装每个可以修改边距的子节点。当你使用深度选择器的时候，你应该这样做。

因此，在您需要修改的每个子组件中，您将执行以下操作：

:host {
  /deep/ mat-sidenav-container {
    margin: 10px;
  }
}

编辑:在你的例子中，我第一次误解了，直到我看了运行的代码！因此，由于地图组件是side-nav内的一个子组件，因此需要使用@at-root引用从DOM树中分离出来，并指向父组件以引用side-nav。如下所示：

:host {
  @at-root /deep/ .mat-drawer-inner-container {
    margin: 100px;
    background-color: blue;
  }
}

您需要将该.css文件更改为.scss，这样才能正常工作。你需要为每个你想让这个页面变得“特别”的页面这样做。