如何修改Angular Material颜色（例如mat-menu-item-label-text-color）

你可以通过以下几种方式覆盖这个变量的值，按需选择全局或局部生效的方案：

1. 全局主题文件覆盖（推荐，全局生效） #

找到项目中的Angular Material主题配置文件（通常是styles.scss或单独的theme.scss），在构建主题代码之前重新定义该变量：

@import '@angular/material/theming';

// 自定义菜单项文本颜色变量
$mat-menu-item-label-text-color: #ff4081; // 替换为你需要的颜色值

// 后续正常构建主题
@include mat-core();
$primary-palette: mat-palette($mat-indigo);
$accent-palette: mat-palette($mat-pink, A200);
$warn-palette: mat-palette($mat-red);
$app-theme: mat-light-theme($primary-palette, $accent-palette, $warn-palette);
@include angular-material-theme($app-theme);

注意：变量必须写在@include angular-material-theme()之前，这样Material的样式会优先使用你定义的变量值。

2. 局部组件内覆盖（仅当前组件生效） #

如果只需要特定组件的菜单项变色，在组件的SCSS文件中使用::ng-deep配合:host限定作用范围：

// 直接修改菜单项文本颜色
:host ::ng-deep .mat-menu-item-text {
  color: #2196f3;
}

// 可选：修改 hover 等交互状态的颜色
:host ::ng-deep .mat-menu-item:hover .mat-menu-item-text {
  color: #1976d2;
}

3. CSS变量覆盖（适用于新版本Angular Material） #

部分新版本的Angular Material会将主题变量映射为全局CSS变量，你可以直接在样式中设置：

// 全局生效，写在styles.scss中
:root {
  --mat-menu-item-label-text-color: #4caf50;
}

// 仅当前组件生效，写在组件SCSS中
:host {
  --mat-menu-item-label-text-color: #4caf50;
}

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