Angular Material 15：如何正确覆盖CSS变量？

可能的原因及对应解法 #

1. 确认Sass变量与函数的正确性 #

首先要确保你已经正确导入Angular Material的Sass模块并定义了$greyPalette，否则mat.get-color-from-palette函数无法生成有效颜色值：

// 在styles.scss顶部导入Material模块
@use '@angular/material' as mat;

// 定义灰色调色板（可根据需求调整）
$greyPalette: mat.define-palette(mat.$grey-palette);

:root {
    --mdc-typography-button-letter-spacing: normal; // 注意：normal是CSS关键字，无需加单引号
    --mdc-dialog-supporting-text-color: mat.get-color-from-palette($greyPalette, 900);
}

2. 提升选择器优先级 #

Angular Material组件会用更具体的选择器设置MDC变量，直接在:root定义的优先级可能不足，可通过以下方式提升：

方式一：针对对话框容器组件设置

直接定位到对话框的容器类，确保样式覆盖组件内部变量：

@use '@angular/material' as mat;
$greyPalette: mat.define-palette(mat.$grey-palette);

.mat-mdc-dialog-container {
    --mdc-dialog-supporting-text-color: mat.get-color-from-palette($greyPalette, 900);
}

方式二：增强全局选择器

如果需要全局生效，用:root body替代单纯的:root提升优先级：

@use '@angular/material' as mat;
$greyPalette: mat.define-palette(mat.$grey-palette);

:root body {
    --mdc-typography-button-letter-spacing: normal;
    --mdc-dialog-supporting-text-color: mat.get-color-from-palette($greyPalette, 900);
}

3. 验证变量名称准确性 #

通过浏览器开发者工具检查对话框支持文本元素的样式，确认它实际引用的CSS变量名称，避免拼写错误导致的失效。

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