如何完全覆盖Angular Material v19 Select组件的样式？

方法1：使用官方mat.option-overrides混合器 #

Select面板内的选项属于独立的mat-option组件，你需要配合原有mat.select-overrides，单独使用它的样式覆盖混合器：

@use '@angular/material' as mat;

// 你的原有Select基础样式覆盖
@include mat.select-overrides((
    panel-background-color: gray,
    enabled-trigger-text-color: white,
    enabled-arrow-color: white,
    focused-arrow-color: orange
));

// 新增Option组件样式覆盖
@include mat.option-overrides((
    hover-background-color: #2c3e50, // 替换为你需要的hover背景色
    hover-text-color: #ffffff,       // 替换为你需要的hover文本色
    selected-background-color: #3498db, // 替换为选中状态背景色
    selected-text-color: #ffffff       // 替换为选中状态文本色
));

这是官方推荐的方式，能保证样式与组件逻辑的一致性，避免DOM结构变动导致样式失效。

方法2：深度选择器兜底（混合器无法满足需求时） #

如果某些特定样式没有对应的混合器变量，可使用::ng-deep结合组件选择器直接定位元素：

// 限制样式仅作用于当前组件内的Select
:host ::ng-deep .mat-mdc-select-panel {
    .mdc-list-item {
        // 选项默认文本色
        color: #e0e0e0;

        &:hover {
            background-color: #4a5568;
            color: #fff;
        }

        &.mdc-list-item--selected {
            background-color: #2b6cb0;
            color: #fff;

            // 可选：自定义选中状态下hover的样式
            &:hover {
                background-color: #2c5282;
            }
        }
    }
}

使用:host ::ng-deep可避免样式污染全局，仅影响当前组件内的Select选项。

注意事项 #

• 确保你的SCSS文件已通过@use '@angular/material' as mat;导入Material样式模块。
• 若使用自定义主题，这些混合器需放在主题定义之后，或在组件样式中正确关联主题。

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