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;

由于在mat-sidenav中没有获得shadow-dom _ngcontent-c0选择器，因此未应用ul元素的样式。有人对应用于该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;
  ...
}

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

1 个答案: