如何在Angular Material v18的M3主题下制作填充与色调按钮？

1. 实现Primary色填充（Filled）按钮 #

这就是你需要的**背景为Primary色、文本为On-Primary（白色）**的按钮，在M3主题下有两种直接实现方式：

• 方式一：用mat-button组件搭配mat-primary类

<button mat-button class="mat-primary" type="button">Primary填充按钮</button>

• 方式二：用mat-flat-button组件，搭配color="primary"和mat-mdc-button-filled类（强制转为填充样式）

<button mat-flat-button color="primary" class="mat-mdc-button-filled" type="button">Primary填充按钮</button>

2. 实现Tonal色调按钮 #

如果需要色调更柔和的填充按钮（背景为Primary Container色，文本为On-Primary Container色），可以添加mat-mdc-button-tonal类：

<button mat-button class="mat-primary mat-mdc-button-tonal" type="button">Primary色调按钮</button>

3. 实现Secondary色填充/色调按钮 #

将上述代码中的mat-primary替换为mat-secondary即可：

• Secondary填充按钮

<button mat-button class="mat-secondary" type="button">Secondary填充按钮</button>

• Secondary色调按钮

<button mat-button class="mat-secondary mat-mdc-button-tonal" type="button">Secondary色调按钮</button>

关于M2写法失效的说明 #

M3主题下Angular Material的按钮样式体系有调整：

• M2中的mat-raised-button对应M3的mat-mdc-button-filled类
• 默认mat-flat-button是无背景的Flat按钮，需额外添加填充类才能切换为带背景的样式

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