Angular material 7 основных элементов, стилизованных под коврик.

Перед обновлением до 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?

Это потому, что вы полагаетесь на библиотеку для стилизации ваших компонентов: если вы продолжаете использовать теги и селекторы библиотеки, при каждой новой версии вы будете сталкиваться с проблемами, подобными этой. Просто дайте своему ul класс и стиль, исходя из этого: вы не только избавляетесь от зависимости библиотеки, но и получаете более тонкий селектор CSS, что означает, что ваш стиль имеет более высокий приоритет.

user4676340 31.10.2018 13:47
2
1
1 989
1

Ответы 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;
  ...
}

Другие вопросы по теме