Styling mat-option with Active and Hover - Angular Materials

Issue

I can't find a CSS solution for changing the text color of the option that is active. Also for the option being hovered. I'm having trouble finding any documentation on styling angular materials in CSS.

One thing I don't understand is I'm using

.mat-option.mat-selected {
  background: red;
  color:black;
}

and the background is red on the last selected item, but it also has white text color instead of black. I need it to have black text and as I hover over an option, it should have a white background.

This is the mat-option I'm trying to style

<mat-form-field class="example-full-width" appearance="outline">
         <mat-label id="placeholder">Find User</mat-label>
       <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"  type="text" name="userName" required minlength="3">
              <mat-autocomplete #auto="matAutocomplete" name="userName">
         <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
           {{option}}

         </mat-option>
       </mat-autocomplete>
   <!-- {{myControl.value}} -->

     </mat-form-field>```

Solution

mat-list-option has mat-option.mat-active class when it's active and mat-option.mat-selected when selected.

Please add the following CSS to your stylesheet:

.mat-option.mat-active {
  background: red !important;
}

The following could be used to style hovering:

.mat-option:hover:not(.mat-option-disabled)

Answered By - Rafi Henig