Angular Material prebuilt themes not working properly

Question

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.

score 0 · Answer 1 · answered Jul 17 '23 at 07:11

0

Also interested in this. I sit with the exact same problem right now for a <mat-nav-list/>.

answered Jul 17 '23 at 07:11

RonnyRoos

21
1

score 0 · Answer 2 · answered Jul 17 '23 at 09:01

As of me i think you are forgot to import module in you app.module file. I have created one module where i have define all module of Angular material that i want to access as below:

import { NgModule } from '@angular/core';
import { LayoutModule } from '@angular/cdk/layout';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import {MatBadgeModule} from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatTableModule } from '@angular/material/table';
import { MatCardModule } from '@angular/material/card';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTabsModule } from '@angular/material/tabs';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatRadioModule} from '@angular/material/radio';
import {MatChipsModule} from '@angular/material/chips';
import {ScrollingModule} from '@angular/cdk/scrolling';
const UI_MODULES = [
  MatDialogModule,
  MatListModule,
  MatTooltipModule,
  MatButtonModule,
  MatFormFieldModule,
  MatSelectModule,
  MatInputModule,
  MatMenuModule,
  MatIconModule,
  MatSnackBarModule,
  MatDatepickerModule,
  MatAutocompleteModule,
  MatToolbarModule,
  MatSidenavModule,
  MatTableModule,
  MatCheckboxModule,
  MatCardModule,
  LayoutModule,
  MatGridListModule,
  MatExpansionModule,
  MatTabsModule,
  MatButtonToggleModule,
  MatPaginatorModule,
  MatSortModule,
  MatSlideToggleModule,
  MatRadioModule,
  MatChipsModule,
  ScrollingModule,
  MatBadgeModule,
  
];
@NgModule({
  declarations: [],
  imports: UI_MODULES, exports: UI_MODULES
})
export class AppMaterialUiModule { }

Import that module in App.module inside import part.:

imports:[AppMaterialUiModule,]

Angular Material prebuilt themes not working properly

2 Answers2