How to style mat-select text color

Question

I have a mat-select inside a mat-toolbar like this:

<mat-card>  
    <mat-toolbar color="primary">Title

       <div style="text-align: right; width: 100%;">
            <mat-select formControlName="year" placeholder="Select Year">
                <mat-option [value]="2023">2023</mat-option>
                <mat-option [value]="2024">2024</mat-option>
            </mat-select>

       </div>

    </mat-toolbar> 
</mat-card>

The mat-toolbar is blue and the text "Title" is bold white from color="primary".

Now I also want the mat-select text "Select Year" and the little arrow next to it to be bold white as in color="primary".

I tried it in several different ways like below but none worked. It keeps displaying it black.

<mat-select formControlName="year" placeholder="Select Year" color="primary">

Inline

<mat-select formControlName="year" placeholder="Select Year" style="color: white">

panelClass as in https://material.angular.io/components/select/overview

component.html

<mat-select [formControl]="panelColor" panelClass="example-panel">

component.scss

.example-panel.mat-mdc-select-panel {
   color: white;
}

Also tried all of the options proposed in these other links and nothing worked:

Angular mat-select text color doesn't change

Styling mat-select in Angular Material

What is interesting is that only the text color doesn't change.

But other styling works. For instance, if I make it bold like this and change fonte size, it works fine:

<mat-select formControlName="year" placeholder="Select Year" style="font-size: 18px; font-weight: bold;">

Maybe it's a global setting that is blocking that change. Not sure.

Also tried adding the css class in myfile.component.scss, app.component.scss and styles.css.

It changes style such as font size, but not font color.

How to style mat-select text color

0 Answers0