title: How to disable gray "wipe" effect when clicking mat-menu-item
body: <p>I've got a mat-nav-list with mat-menu-items within.  I've setup a routerLinkActive class in my scss to change the background and color of the text of the mat-menu-item when an item is clicked.  However, when one of the items is clicked, it changes it background to a light gray and my background-color is only shown after you click elsewhere within the application.</p>
  
  <p>The behavior is visible in the below gif.</p>
  
  <p><a href="https://i.stack.imgur.com/9eBwM.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9eBwM.gif" alt="Behavior of Mat-Menu-Item on click"></a></p>
  
  <p>I'd like for the mat-menu-item background-color to change to my chosen chosen color without the default "gray wipe" behavior, is this possible?</p>
  
  <p>My code is below if required:</p>
  
  <p><strong>app.html</strong></p>
  
  <pre><code>&lt;mat-sidenav #sidenav mode="side" [opened]="(sideNavOpened)" class="sidenav-inner-content"&gt;
      &lt;mat-nav-list&gt;
          &lt;a mat-list-item routerLink="/customers/search" routerLinkActive="active"&gt;&lt;mat-icon&gt;search&lt;/mat-icon&gt; Search Customer&lt;/a&gt;
          &lt;a mat-list-item routerLink="/customers/create" routerLinkActive="active"&gt;&lt;mat-icon&gt;add&lt;/mat-icon&gt; Create Customer&lt;/a&gt;
      &lt;/mat-nav-list&gt;
  &lt;/mat-sidenav&gt;
  </code></pre>
  
  <p><strong>app.scss</strong></p>
  
  <pre><code>.active {
      border-left: 5px solid mat-color($accent);
      background-color: mat-color($primary);
      color: $light-primary-text !important;
  }
  </code></pre>