Angular升级至v18后Material日期选择器月切换按钮样式缺失问题

问题背景 #

从Angular v16升级至v18后，Material日期选择器的「上月/下月」切换按钮样式丢失，仅显示微小圆点。测试发现加载v16的样式表可修复问题，对比后确认v16中存在的以下样式规则在v18中被移除：

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

当前全局样式配置（styles.scss）：

@use '@angular/material' as mat;

$theme: mat.define-theme((
  color: (
    theme-type: light,
    use-system-variables: true,
    system-variables-prefix: dst-sys-color
  ),
  typography: (
    system-variables-prefix: md-sys-typescale
  ),
  density: (
    scale: -2
  )
));

@include mat.core;

html {
  min-width: 1024px;
  @include mat.typography-hierarchy($theme, $back-compat: true);
  @include mat.all-component-themes($theme);
}

注：主题颜色与排版属性由外部样式表的自定义属性提供，use-system-variables配置加载正常。

问题原因 #

Angular Material v18对MDC组件的样式体系进行了重构，原v16中直接定义的按钮尺寸样式被整合到主题的密度控制系统中。由于配置了density: (scale: -2)的高密度等级，且开启use-system-variables后，自定义系统变量未覆盖按钮尺寸相关的MDC变量，导致按钮失去了默认的尺寸约束，最终缩成微小圆点。

解决方法 #

方法1：手动补充缺失样式（快速修复） #

在全局样式表中添加v16遗留的样式规则，直接强制设置按钮尺寸：

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

该方法无需调整现有主题配置，可快速恢复按钮正常显示。

方法2：遵循v18主题规范修复 #

如果希望贴合v18的设计逻辑，可选择以下两种方式：

• 调整密度等级：将主题配置中的density: (scale: -2)改为scale: 0或scale: -1，降低密度等级后，按钮会自动恢复默认尺寸。
• 补充自定义系统变量：在提供主题属性的外部样式表中，添加控制按钮尺寸的系统变量：

:root {
  --dst-sys-color-icon-button-state-layer-size: 40px;
}

通过自定义系统变量覆盖MDC默认值，既保留高密度配置，又能控制按钮显示尺寸。

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