I'd like to have multiple mat-selects on a page, each with a different color for the mat-select-value.

When I put this in my css it changes the color of all the selected values:

:host ::ng-deep .mat-select-value {
    color: green !important;
}

I want another mat-select that has a mat-select-value of blue though. How would I do that?

CodePudding user response：

Try <mat-select > then

:host ::ng-deep .blue .mat-select-value {
    color: blue !important;
}

And so on..