Angular Material Design：如何仅为单个按钮设置Density？

方法1：使用CSS变量（推荐，Angular Material 15+） #

Angular Material 15及以上版本支持通过CSS变量直接设置组件密度，无需依赖LESS/Sass混入，操作更简单：

在组件LESS文件中定义样式类：

.smallDiagramButton {
  --mat-button-density: -3;
}

将类应用到目标按钮：

<mat-raised-button class="smallDiagramButton">小密度按钮</mat-raised-button>

该CSS变量会直接覆盖按钮的默认密度值，仅作用于带有此自定义类的按钮。

方法2：正确使用LESS混入（兼容旧版本） #

若使用Angular Material 14及以下版本，或必须通过混入实现，核心问题是mat.button-density混入默认生成全局按钮选择器样式，需通过嵌套将样式作用域限制在自定义类下，同时确保在主题上下文环境中调用：

1. 在组件LESS文件顶部引入Material主题依赖：

@import '~@angular/material/theming';

// 初始化Material核心样式，确保混入能获取主题变量
@include mat.core();

2. 嵌套调用混入，限定样式作用域：

.smallDiagramButton {
  // 将密度样式作用于自定义类下的按钮及内部元素
  @include mat.button-density(-3);

  // 若遇到样式优先级问题，可叠加按钮类增强权重
  &.mat-raised-button {
    @include mat.button-density(-3);
  }
}

3. 应用类到按钮：

<mat-raised-button class="smallDiagramButton">小密度按钮</mat-raised-button>

原写法失效原因 #

直接在.smallDiagramButton中调用mat.button-density(-3)时，混入生成的样式针对全局选择器（如.mat-button-label），而非.smallDiagramButton .mat-button-label，导致样式无法作用到目标按钮的内部元素。通过嵌套调用，LESS会自动将混入内的所有选择器包裹在自定义类下，确保样式作用域正确。

内容的提问来源于stack exchange，提问作者Konrad