Angular Material prebuilt themes not working properly

i have spent a lot of time trying to figure out Angular Material Themes. I startet with simply importing a prebuilt one but i am already having problems. The Theming doesnt seem to apply to all the Tags. In my understanding a "prebuilt theme" should provide default styling for each and every one of the material components. That doesnt seem to be the case. Specifically the mat-list components are invisible (background- and font color are both white)

styles.scss:

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

@import '../node_modules/@angular/material/theming';

$anms-black-primary: mat-palette($mat-grey, 700, 300, 900);
$anms-black-accent: mat-palette($mat-blue-grey, 400);
$anms-black-warn: mat-palette($mat-red, 500);

$anms-black-theme: mat-dark-theme(
$anms-black-primary,
$anms-black-accent,
$anms-black-warn
);
@include angular-material-theme($anms-black-theme);
.deeppurple-amber {
@include angular-material-theme($anms-black-theme);
}


everything past the first input is copied from How are Angular Prebuilt Themes generated? . with this most components in my project are at least styled in some way. However, notably the mat-list i have is still invisible :

<h1>Start Page</h1>
<!-- <mat-icon svgIcon="gg-add"></mat-icon>
<mat-icon svgIcon="gg-push-chevron-down"></mat-icon> -->
<mat-list role="list">
<mat-list-item role="listitem" *ngFor="let item of data">
<div matListItemTitle><span style="font-weight: bold;">{{ item.name }}: </span> </div>
<div matListItemLine>{{ item.number }} {{ item.unit }}</div>

</mat-list-item>
</mat-list>


maybe the mat-list need to be wrapped into something? The docs wont tell.

I would like to know why my mat-list arent properly styled and what is the minimum effort to have a prebuilt theme properly put in so that the styles apply to all the material components.

Also, why do i need to set a black colour theme in the styles.scss when im already importing a prebuilt theme? Is a prebuilt theme even supposed to work the way that i expect it to (import it and have it work with no further css).

I included a prebuilt theme into the styles.scss and i expected all material components to be styled properly.

Continue reading...