How can I change the text color (or style) of an Angular Material sidenav?

Question

I'm at a loss with Angular Material. I was able to set it up, and it does play nice with the toolbar, that has a color property. My custom theme is as follows:

@use '@angular/material' as mat;

@include mat.core();

$SspWebUi-primary: mat.define-palette(mat.$teal-palette, 900, 700);
$SspWebUi-accent: mat.define-palette(mat.$blue-gray-palette, 100, 50, 200);

$SspWebUi-warn: mat.define-palette(mat.$deep-orange-palette);

$SspWebUi-theme: mat.define-light-theme((color: (primary: $SspWebUi-primary,
    accent: $SspWebUi-accent,
    warn: $SspWebUi-warn,
)));
  
@include mat.all-component-themes($SspWebUi-theme);

In my component the HTML looks as follows:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav class="sidenav-nav" mode="side" opened>
    <mat-nav-list>
        <a mat-list-item>Pepper</a>
        <a mat-list-item>Salt</a>
        <a mat-list-item>Paprika</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
     <div>Hello from main content area</div>
  </mat-sidenav-content>
</mat-sidenav-container>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

I have defined a CSS for this HTML:

.sidenav-container {
  width: 100vw;
  height: calc(100vh - 50px);
}

.sidenav-nav {
  width: 12vw;
  text-align: center;
}

If I set 'color: white;' in any of these blocks it gest ignored. Setting 'background:black' however works. I have tried to set up a custom theme as per the official guide, but found no success. After saving the file the terminal said there were no changes to the output files. I could not point to what I was doing wrong, hoping someone with more in-depth knowledge can guide me.

Answer 1

I was able to solve it today. After looking at the rendered page in the browser it turned out the list items are in a span, and that had a class which would overwrite any color I set. After changing the color in the class of the span the page rendered correctly.