Угловой материал 7 мат-сиденав для укладки нижележащих элементов - PullRequest
Новая
       26

Угловой материал 7 мат-сиденав для укладки нижележащих элементов

0 голосов
/ 31 октября 2018

До обновления до 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?

...