Why cant i directy make changes to .mat-list-item styling properties?

Question

Using Angular materials 16.1.6.

Styles.scss:

@use '@angular/material' as mat;
@import '@angular/material/prebuilt-themes/indigo-pink.css';

////////////////////////////////////////////////////////////////////////////////////////
// mat-list-item styling
////////////////////////////////////////////////////////////////////////////////////////

.mat-list-item .mat-list-item-content {
  display: flex !important;
  align-items: center !important;
}

App.component.html:

   <mat-list-item>
       <mat-icon>account_circle</mat-icon>
       <span>Add account</span>
     </mat-list-item>

i thought/even though not advised by adding !important i thought that i would override the imported theme. But it is still not centering contents within the mat-list-item container.

What am i doing wrong?

Answer 1

Material styles are compiled using scss functions which, due to how compiling is done for those files, often takes priority over custom styles in your css. We've worked around this in our project by making seperate scss files and functions to import and use with the material set up. If you are using custom stuff it's as easy as...

1. In /scss/ make a list.scss file. It would look roughly like:

   @use '@angular/material' as mat;

   @mixin custom-mat-list-layout() { .mat-list-item .mat-list-item-content { display: flex !important; align-items: center !important; } }

2. In your main css file add a mixin and include it with the styles:

   @import 'list';

   @mixin custom-components-layouts($theme) { @include custom-mat-list-layout($theme); }

   @include custom-components-layouts()

That should work for your situation (I think). We use custom css styling to do light/dark themes, so we have our own pallet being imported and customized for everything. The last thing we had to add was this to get it to work with that theming:

.dark-theme {
  @include custom-components-layouts();
}

.light-theme {
  @include custom-components-layouts();
}