Styling mat-option with Active and Hover - Angular Materials

Question

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>```

Answer 1

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)

Answer 2

All material ui style css are from node_modules. So you can customize material css as follows.

1) The best way is to change node_module css file. If you want to change mat-select hover style, first of all, you have to find css file. If you installed indigo-pink theme, you can find this css file.

node_modules/@angular/material/prebuilt-themes/indigo-pink.css

And class is .mat-option:focus:not(.mat-option-disabled)

ex: .mat-option:focus:not(.mat-option-disabled){background:#3f51b5;color:white}

2) If you don't want to change module css, you have to insert customize css style to last css file of angular.json styles.

angular.json

   "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.scss"
   ],

last css file is styles.scss, so you should insert your style on it. But customize css styles has to be end with "!important"

3) In the case of using customize angular material theme, you can find this file.

./node_modules/@angular/material/_theming.scss

Change the css on this file like this. .mat-option { color: mat-color($foreground, text);

&:hover:not(.mat-option-disabled),
&:focus:not(.mat-option-disabled) {
  background: #607d8b;
  color: white
}