Angular Material 7 mat-sidenav样式基础元素

Question

在升级到Angular 7和Material 7之前，我们有一个类似这样的dom结构：

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" [opened]="sideNavOpen">
    <ul>
      <li>
        <a mat-icon-button color="primary" [routerLink]="['']">
          <mat-icon>home</mat-icon>
        </a>
      </li>
     ...
    </ul>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

在scss中，我们有

:host {
...

  > mat-toolbar {
   ...
  }

  > mat-sidenav-container {
    ...
    > mat-sidenav {
      ...
      > ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        ...

新版本的问题是，mat-sidenav的模板已经从<ng-content></ng-content>更改为<div class="mat-drawer-inner-container"><ng-content></ng-content></div>。

将样式更改为

    > mat-sidenav {
      > div {
        > ul {
          margin: 0;
          padding: 0;
          list-style-type: none;

不会应用ul元素的样式，因为mat-sidenav中的没有获得shadow-dom _ngcontent-c0选择器。对于应用于此div的直接祖先的样式，有人有解决方案吗？

Answer 1

在尝试将某些样式应用于mat-sidenav元素时也遇到了类似的问题。这可能是因为Angular的视图封装。我的解决方案是将mat-sidenav中包含的项包装在div中，并让div继承我应用于sidenav的样式。

//HTML
<mat-sidenav #sidenav>
  <!-- // wrapper -->
  <div class="sidenav-items-wrapper">
    <!-- // Items in sidenav -->
    <ul>
      ...
    </ul>
  </div>
</mat-sidenav>

//CSS
.sidenav-items-wrapper {
  display: flex;
  height: inherit;
  width: inherit;
  ...
}