垫子图标按钮需要包裹以应用密度

Question

当使用 Angular Material Theme API 直接将自定义密度（通过自定义 CSS 类）应用到 Angular Material 按钮（例如 mat-flat-button、mat-lines-button）时，高度会按预期进行调整。但是，当自定义密度上下文（与 mat-lines-button 等相同的 CSS 类）直接应用于 时，它的大小保持不变。仅当 mat-icon-button 包裹在具有密度类的元素中时，才会应用密度更改。

/* Observe that the height changes as expected */
<button mat-flat-button class="ui-high-density">Some text</button>

/* Observe that the height does not change */
<button mat-icon-button class="ui-high-density">Some text</button>

/* Observe that the height changes as expected */
<div class="ui-high-density">
   <button mat-icon-button>
      <mat-icon>home</mat-icon>
   </button>
</div>

CSS类：

.ui-high-density {
   @include mat.icon-button-density(-2);
}

StackBlitz 链接

问题：为什么 Angular Material mat-icon-button 必须包裹在其他元素中才能应用不同的密度，而其他按钮（例如 mat-flat-button）则不能？

将 Angular 18 和 Angular Material 18 与 Material Design 3 结合使用

确定维度的类正在寻找

high-density-class

的子元素：

.high-density-class[_ngcontent-ng-c828002457] .mat-mdc-icon-button.mat-mdc-button-base[_ngcontent-ng-c828002457] {
    --mdc-icon-button-state-layer-size: 28px;
    width: var(--mdc-icon-button-state-layer-size);
    height: var(--mdc-icon-button-state-layer-size);
    padding: 2px;
}

如您所见，在

.high-density-class

内部它会查找

.mat-mdc-icon-button.mat-mdc-button-base

，因为两者都位于根级别，因此不会应用样式。

然而，如果我们在父级有该类，则会找到子级并应用该类。

针对此问题的 CSS 修复方法是简单地遵循父类方法，另一个修复方法可能是将

mat.icon-button-density(-5)

的范围限制在组件的范围内。

// Apply density using the new API
.high-density-class {
  @include mat.button-density(-5);
}
:host {
  @include mat.icon-button-density(-5);
}

如果您只想将其应用于特定区域，您还可以添加类并将此样式范围限制到特定部分。

Stackblitz 演示

Answer 1

确定维度的类正在寻找

high-density-class

的子元素：

.high-density-class[_ngcontent-ng-c828002457] .mat-mdc-icon-button.mat-mdc-button-base[_ngcontent-ng-c828002457] {
    --mdc-icon-button-state-layer-size: 28px;
    width: var(--mdc-icon-button-state-layer-size);
    height: var(--mdc-icon-button-state-layer-size);
    padding: 2px;
}

如您所见，在

.high-density-class

内部它会查找

.mat-mdc-icon-button.mat-mdc-button-base

，因为两者都位于根级别，因此不会应用样式。

然而，如果我们在父级有该类，则会找到子级并应用该类。

针对此问题的 CSS 修复方法是简单地遵循父类方法，另一个修复方法可能是将

mat.icon-button-density(-5)

的范围限制在组件的范围内。

// Apply density using the new API
.high-density-class {
  @include mat.button-density(-5);
}
:host {
  @include mat.icon-button-density(-5);
}

如果您只想将其应用于特定区域，您还可以添加类并将此样式范围限制到特定部分。

Stackblitz 演示