Angular Material 18 版本中按钮圆角样式失效问题解析

在从 Angular Material 14 升级到 18 版本的过程中，部分开发者遇到了按钮圆角样式失效的问题。本文将深入分析该问题的成因，并提供完整的解决方案。

问题现象

升级后，原本应该具有圆角效果的按钮变成了直角样式。通过手动添加以下 CSS 变量可以临时修复：

--mdc-button-border-radius: 28px;
--mdc-raised-button-border-radius: 28px;
--mdc-protected-button-container-shape: 28px;

根本原因

这个问题通常与主题系统配置有关。Angular Material 18 对主题系统进行了重构，主要变化包括：

1. 主题变量重构：Material Design Components (MDC) 的 CSS 变量命名规范发生了变化
2. 默认值调整：部分样式属性的默认值被重置
3. 主题继承机制：需要显式引入基础主题样式

完整解决方案

方案一：全局主题配置

在 styles.scss 中确保包含以下内容：

@use '@angular/material' as mat;
@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.all-component-themes($my-theme);

方案二：自定义按钮形状

如需定制圆角大小，应该通过主题系统配置：

$my-theme: mat.define-light-theme((
  // ...其他配置
  shape: mat.define-shape-config(
    $small: 4px,
    $medium: 8px,
    $large: 12px
  )
));

方案三：组件级样式覆盖

对于特定按钮的样式调整，推荐使用：

.my-rounded-button {
  @include mat.button-shape(28px);
}

升级建议

1. 主题检查：确保项目中至少包含一个完整主题
2. 样式审计：检查是否有自定义样式覆盖了 Material 默认样式
3. 版本兼容性：确认所有依赖包都已更新到兼容版本
4. 样式隔离：避免在全局样式中直接修改 Material 内部变量

技术原理

Angular Material 18 采用了更新的 MDC Web 实现，其样式系统现在基于 CSS Custom Properties 和 Design Tokens。按钮的圆角效果由 shape 设计标记控制，这些标记需要通过主题系统正确初始化才能生效。

通过理解这些底层机制，开发者可以更灵活地控制组件样式，同时确保升级过程的平滑过渡。