Angular Material MDC迁移最佳实践咨询：SCSS相关问题求解

1. 获取完整的--mat-mdc-*变量列表 #

官方文档未提供--mat-mdc-*变量的完整公开列表，但可以通过两种方式获取：

• 查看Angular Material对应的MDC组件SCSS源码：每个组件的样式文件（如button/_mdc-button.scss）中会定义所有关联的--mat-mdc-*变量，可直接在node_modules/@angular/material目录下找到这些文件。
• 浏览器开发者工具排查：打开元素面板选中目标组件，在样式面板中筛选--mat-mdc-前缀的变量，能看到当前组件生效的所有相关CSS变量。

自定义时，可在全局样式文件或组件SCSS中直接覆盖这些变量，示例：

// 全局覆盖按钮文本颜色
:root {
  --mat-mdc-button-label-text-color: #your-custom-color;
}

// 组件内单独覆盖
.mat-mdc-button {
  --mat-mdc-button-label-text-color: #your-custom-color;
}

2. 全局覆盖高对比度颜色默认逻辑 #

按钮、复选框等组件默认使用MDC内置的高对比度计算逻辑，会忽略调色板中定义的对比色。无需逐个组件修改，可通过重写MDC的主题对比色函数全局解决：

@use '@angular/material' as mat;
@use '@material/theme' as mdc-theme;

// 自定义对比色函数，调用你调色板中的对比色
@function custom-theme-contrast($color) {
  @return mat.get-color-from-palette($your-custom-palette, contrast);
}

// 全局替换MDC的对比色计算逻辑
@include mdc-theme.core-styles((
  theme-contrast: custom-theme-contrast
));

如果仅需调整部分组件的对比色，可在组件SCSS中直接覆盖对应--mat-mdc-*颜色变量，示例：

.mat-mdc-checkbox {
  --mat-mdc-checkbox-selected-icon-color: #your-custom-contrast-color;
}

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