Angular Material 19 styling toolbar not working

I am trying to understand how the component overrides are working and I am more of an angular beginner. In the following code which I mostly took over from this repo repo, I am trying to change the color of the toolbar inside the mat-sidenav-content.

nav.component.html

<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false"
>
<mat-toolbar class="my">Menu</mat-toolbar>
<mat-nav-list>
@for (item of menuItems; track $index) {
<a mat-list-item [routerLink]="'/app/' + item.path"> {{ item.label }} </a>
}
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar class="my">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Title</span>
<span class="example-spacer"></span>
@if (isLoggedIn()) {
<button mat-flat-button (click)="logout()">
<mat-icon>logout</mat-icon>
<span>Logout</span>
</button>
} @else {
<button mat-flat-button (click)="login()">
<mat-icon>login</mat-icon>
<span>Login</span>
</button>
}
</mat-toolbar>
<!-- Add Content here -->
<div class="content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>



it works when I put the following code into my theme.scss

:root {
@include mat.toolbar-overrides((
container-background-color: black,
));
}


But when I try

.my{
@include mat.toolbar-overrides(
(
container-background-color: black,

)
);
}


inside nav.component.scss it doesnt work.

When I add it inside the theme.scss then all toolbars are styled, but what if I wanted to only style a specific toolbar inside a component? Is something like that not possible? Also the mat-toolbar inside the mat-sidenav is not styled, at least not the container color, but that probably has something to do with the sidenav container styling right?

Continue reading...