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 的 View 封装造成的。我的解决方法是将 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;
  ...
}