Struggling to find a CSS solution for changing the text color of the active option and on hover. The lack of documentation on styling angular materials in CSS is proving to be an issue.
I've tried using
.mat-option.mat-selected {
background: red;
color:black;
}
The problem is that while the last selected item has a red background, the text color remains white instead of black. I need the text color to be black and the background to turn white when hovering over an option.
This is the mat-option I'm attempting 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>