Change mat-optgroup background and text color

user_18567855 0
Viewed 68

my code is like this :

<mat-select class="select" [formControl]="tasksFormControl" multiple panelClass="myPanelClass" disableOptionCentering>
                    <mat-option class="option" [value]="1" (click)="selectAllTasks(ev_tasks)"   
                    #ev_tasks
                     >SelectAll</mat-option>
                   <mat-optgroup class="group" *ngFor="let group of taskGroups" label="'hello world'"
                             [disabled]="group.disabled">
                 <mat-option class="option" *ngFor="let task of group.tasks" [value]="task">
                   {{task.task_name}}
                 </mat-option>
               </mat-optgroup>
                  </mat-select>

I can't change the mat-option text color no matter what I try. any ideas?

i want it to have the followign attirubtes :

{
background: #fff
color:black;}
angular-material css html
1 Answers

It's most probably due to either styles not piercing the component or lower specificity of your styles. To fix it you need to:

  • Place your styles in the global stylesheet (i.e. styles.scss in the root, and not component stylesheet)
  • Use styles more specific than the ones used by defaults.

This means, for example:

.my-panel-class {
  .mat-option {
    background-color: #fff;
    color: black;
  }
}

Here's a working stackblitz forked from the official docs with styles added (note I've used different panelClass and colors).

user_45501580
Related