如何使用 Angular 材料密度？

Question

Material has created a density component modifier (Links here and here ).

I've imported material/density and followed the suggested code in my scss file:

@use "@material/button";

.my-custom-button {
  // Sets button density scale to `-3`, i.e. button height to `24px`.
  @include button.density(-3);
}

but get errors about not finding the stylesheet. I've scored the web and found no solution to this problem.

Answer 1

With Angular 15 there is this guide https://material.angular.io/guide/theming#customizing-density so top of scss file you add use

@use '@angular/material' as mat;`

then add

.my-custom-button {
  @include mat.button-density(-2);
}

I noticed that I needed to add that class to upper level element not to button itself. It might be some css selector problem. So make css selector strong enough.