如何在Angular Material M3中调整按钮尺寸（替代旧版方法）

在Angular Material v15+版本中，mat.define-typography-level已被移除，你可以通过以下官方支持的方式实现自定义大尺寸按钮：

全局替换所有按钮样式 #

如果希望所有按钮都使用大尺寸，直接在全局排版配置中定义按钮的参数：

@use '@angular/material' as mat;

// 定义大按钮的排版参数
$large-button-settings: (
  font-family: 'Roboto',
  font-weight: 400,
  font-size: 1.25rem,
  line-height: 1.2,
  letter-spacing: normal
);

// 生成自定义排版配置
$custom-typography: mat.define-typography-config(
  $button: $large-button-settings
);

// 结合主题色生成完整主题
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);
$warn: mat.define-palette(mat.$red-palette);

$custom-theme: mat.define-light-theme(
  (
    color: (primary: $primary, accent: $accent, warn: $warn),
    typography: $custom-typography
  )
);

// 应用主题到所有组件
@include mat.all-component-themes($custom-theme);

仅给特定按钮设置大尺寸 #

若只需部分按钮变大，创建自定义类并使用Angular Material的排版混合器：

@use '@angular/material' as mat;

// 定义大按钮排版参数
$large-button-settings: (
  font-family: 'Roboto',
  font-weight: 400,
  font-size: 1.25rem,
  line-height: 1.2,
  letter-spacing: normal
);

// 自定义大按钮样式类
.large-button {
  @include mat.typography-level($large-button-settings);
  // 可选：调整内边距增强视觉尺寸
  padding: 0.75rem 1.5rem;
}

在HTML中给目标按钮添加类：

<button mat-raised-button class="large-button">大尺寸按钮</button>

这种方式完全基于Angular Material的原生排版系统，无需直接覆盖组件的默认CSS样式。

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