如何修改Angular Material中选中的MAT-SELECT选项样式

我尝试修改Angular Material的Mat-Select组件选中选项后的样式，想要实现类似JIRA状态选择器的效果，但选中后自定义badge的样式会丢失，未选中时样式正常。以下是我当前的代码和尝试过的SCSS：

现有HTML代码 #

<div style="display: flex; justify-content: center;">
    <mat-form-field appearance="outline">
        <mat-label>Option</mat-label>
        <mat-select>
            <mat-option value="option1"><app-badge></app-badge></mat-option>
            <mat-option value="option1"><app-badge-warning></app-badge-warning></mat-option>
        </mat-select>
    </mat-form-field>
</div>

尝试过的SCSS版本1（无效） #

::ng-deep {
    // 选中选项时的文本颜色
    .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
        color: rgb(0, 0, 0) !important;
    }
    
    // 选中标记（对勾）颜色
    .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after, 
    .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
        color: #000000 !important;
    }

    // 选择框中显示选中项的背景色
    .mat-mdc-select-value-text {
        background-color: #000000 !important;
    }
}

尝试过的SCSS版本2（无效） #

::ng-deep {
    // 选中选项时的文本颜色
    .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
        color: rgb(0, 0, 0) !important;
    }

    // 选中标记（对勾）颜色
    .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
    .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
        color: #000000 !important;
    }

    // 尝试给选中项中的badge加样式（无效）
    .mat-mdc-select, .mat-mdc-select-value, .mat-mdc-select-value-text {
        ::content>.app-badge {
            display: inline-flex !important;
            padding: 2px 12px 2px 8px;
            align-items: center;
            gap: 6px;
            border-radius: 6px !important;
            background: var(--transparent-success-16, rgba(54, 179, 126, 0.16)) !important;
        }
    }
}

解决方案 #

1. 自定义选中项显示模板（核心修复样式丢失） #

Angular Material的Mat-Select默认只会提取选项的文本内容渲染到选择框，不会保留自定义组件。必须使用mat-select-trigger自定义选中后的显示内容，确保badge组件能被正确渲染：

<div style="display: flex; justify-content: center;">
    <mat-form-field appearance="outline">
        <mat-label>Option</mat-label>
        <mat-select [(value)]="selectedOption">
            <!-- 自定义选中后显示的模板 -->
            <mat-select-trigger>
                <ng-container *ngIf="selectedOption === 'option1'">
                    <app-badge></app-badge>
                </ng-container>
                <ng-container *ngIf="selectedOption === 'option2'">
                    <app-badge-warning></app-badge-warning>
                </ng-container>
            </mat-select-trigger>

            <!-- 修正原代码的value重复问题 -->
            <mat-option value="option1"><app-badge></app-badge></mat-option>
            <mat-option value="option2"><app-badge-warning></app-badge-warning></mat-option>
        </mat-select>
    </mat-form-field>
</div>

在组件类中添加绑定属性：

selectedOption: string = '';

2. 调整样式穿透规则 #

移除已废弃的::content选择器，针对正确的DOM元素设置样式：

::ng-deep {
    // 下拉选项选中时的文本颜色
    .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
        color: #000 !important;
    }

    // 选中标记（对勾）颜色
    .mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
    .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
        color: #000 !important;
    }

    // 选择框内badge的样式（和下拉选项保持一致）
    .mat-mdc-select-trigger .app-badge,
    .mat-mdc-select-trigger .app-badge-warning {
        display: inline-flex;
        padding: 2px 12px 2px 8px;
        align-items: center;
        gap: 6px;
        border-radius: 6px;
    }
}

关键说明 #

• mat-select-trigger是解决自定义组件选中后丢失的核心，它让你完全控制选择框内的渲染内容，确保和下拉选项样式一致。
• 原代码中两个mat-option的value重复，必须设置不同值才能正确区分选项。
• 避免使用已废弃的::content选择器，改用直接的类选择器进行样式穿透。

内容的提问来源于stack exchange，提问作者Federico Andres Ratcliffe