如何使用 Angular 材料密度？

Question

材料創建了一個密度分量修改器（鏈接在這里和這里）。

我已經導入了材料/密度並按照我的 scss 文件中的建議代碼進行操作：

@use "@material/button";

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

但會收到有關找不到樣式表的錯誤。 我已經打分 web 並沒有找到解決這個問題的方法。

Answer 1

使用 Angular 15 有本指南https://material.angular.io/guide/theming#customizing-density所以在 scss 文件頂部添加使用

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

然后加

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

我注意到我需要將 class 添加到上層元素而不是按鈕本身。 這可能是一些 css 選擇器問題。 所以讓 css 選擇器足夠強大。