如何修改mat-menu-item、mat-select等Angular Material组件颜色并适配主题色？

核心思路 #

借助Angular Material提供的主题调色板变量，通过Sass混合器或自定义CSS规则覆盖组件默认样式，确保样式优先级足够（优先推荐贴合Material主题体系的混合器方式，也可按需用组件内样式穿透）。

1. 定制mat-menu-item的悬停、文本与背景色 #

方法一：主题混合器扩展（全局生效） #

在你的主题配置文件（如theme.scss）中添加以下代码，与现有主题配置整合：

// 从自定义主题中提取调色板变量
@mixin custom-menu-item-theme($theme) {
  $color-config: mat.get-color-config($theme);
  $primary: map-get($color-config, primary);
  $accent: map-get($color-config, accent);

  .mat-mdc-menu-item {
    // 默认文本颜色
    color: mat.get-color-from-palette($primary, 100);

    // 悬停/激活状态
    &:hover, &.mdc-list-item--activated {
      background-color: mat.get-color-from-palette($accent, 700);
      color: white;
    }

    // 高亮选中状态（可选）
    &.mat-mdc-menu-item-highlighted {
      background-color: mat.get-color-from-palette($primary, 700);
      color: white;
    }
  }
}

// 在默认组件主题引入后，加载自定义混合器
@include mat.all-component-themes($theme);
@include custom-menu-item-theme($theme);
// 保留你原有的其他主题引入
@include shared.shared-themes($theme);
@include components.component-themes($theme);

方法二：组件内样式穿透（仅当前组件生效） #

如果只需在单个组件内修改，在组件的.scss文件中使用样式穿透：

:host ::ng-deep .mat-mdc-menu-item {
  color: var(--mat-primary-color);

  &:hover {
    background-color: var(--mat-accent-color);
    color: white;
  }
}

2. 定制mat-select的颜色样式 #

mat-select包含触发按钮、下拉面板、选项等多个部分，需分别配置：

方法一：主题混合器扩展（全局生效） #

在theme.scss中添加：

@mixin custom-select-theme($theme) {
  $color-config: mat.get-color-config($theme);
  $primary: map-get($color-config, primary);
  $accent: map-get($color-config, accent);

  // 选择器触发按钮文本
  .mat-mdc-select .mat-mdc-select-trigger {
    color: mat.get-color-from-palette($primary, 100);
  }

  // 下拉面板背景
  .mat-mdc-select-panel {
    background-color: mat.get-color-from-palette($primary, 900);
  }

  // 下拉选项样式
  .mat-mdc-option {
    color: mat.get-color-from-palette($primary, 200);

    &:hover, &.mdc-list-item--activated {
      background-color: mat.get-color-from-palette($accent, 700);
      color: white;
    }

    // 选中状态
    &.mdc-list-item--selected {
      color: mat.get-color-from-palette($accent, 100);
      background-color: mat.get-color-from-palette($accent, 900);
    }
  }
}

// 引入自定义混合器
@include custom-select-theme($theme);

方法二：组件内样式穿透（仅当前组件生效） #

:host ::ng-deep {
  // 选择器触发按钮文本
  .mat-mdc-select-trigger {
    color: var(--mat-primary-color);
  }

  // 下拉面板背景
  .mat-mdc-select-panel {
    background-color: mat.get-color-from-palette($primary, 900);
  }

  // 下拉选项样式
  .mat-mdc-option {
    color: var(--mat-primary-light-color);

    &:hover {
      background-color: var(--mat-accent-color);
      color: white;
    }
  }
}

关键注意事项 #

• 自定义混合器必须在@include mat.all-component-themes($theme);之后引入，才能覆盖默认样式。
• 使用mat.get-color-from-palette($palette, $hue)可以从自定义调色板中提取不同亮度的颜色，比如700代表调色板中较深的色调。
• 也可直接使用Material自动生成的CSS变量，如--mat-primary-color、--mat-accent-color，无需手动提取调色板值。

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