Angular Material 7 mat-sidenav styling underlying elements

Question

Before upgrading to Angular 7 and Material 7 we had a dom-structure like this:

<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>

in the scss we had

:host {
...

  > mat-toolbar {
   ...
  }

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

The problem with the newer version is, that the template of mat-sidenav has changed from <ng-content></ng-content> to <div class="mat-drawer-inner-container"><ng-content></ng-content></div>.

When changing the style to

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

the style to the ul element doesn't get applied since the in the mat-sidenav doesn't get the shadow-dom _ngcontent-c0 selector. Does anyone have a solution for the style applied to the direct ancestor of this div?

Well that's because you are relying on a library to dtyle your components : if you keep using library tags and selectors, at every new version, you will encounter issues similar to that. Just give your ul a class and style from that : not only you get rid of the library dependency, but you also a finer CSS selector, meaning your style have a higher priority. — user4676340

HelloWorldPeace HelloWorldPeace · Accepted Answer · 2019-10-13T05:23:03

Had a similar issue trying to apply certain styles to the mat-sidenav element. This was likely due to Angular's view encapsulation. How I resolved it was to wrap the items contained in the mat-sidenav in a div and let the div inherit the styles I applied to the 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 styling underlying elements

1 Answers