Question

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

下面的我的侧面导航代码有margin: 20px;，我只希望被加载到内容部分的几个组件（例如：地图）覆盖。一种方法是删除边距并将其单独应用于除地图之外的所有组件。但是我想知道是否有一种方法可以提升样式层次结构并从子组件中覆盖它。那是相反的方向\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>

这里是我所谈论的示例。请参阅地图组件。它应该覆盖父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才能正常工作。而且，您需要对要制作此“特殊”页面的每个页面都执行此操作。

由Angular中的子组件（mat-sidenav）覆盖父样式

1 个答案: