css - 带有 Active 和 Hover 的样式垫选项 - Angular Materials

Question

我找不到用于更改事件选项的文本颜色的 CSS 解决方案。也适用于悬停的选项。我无法找到任何关于在 CSS 中设置 Angular Material 样式的文档。

我不明白的一件事是我正在使用

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

并且最后选择的元素的背景是红色的，但它也有白色文本颜色而不是黑色。我需要它有黑色文本，当我将鼠标悬停在一个选项上时，它应该有白色背景。

这是我要设置样式的垫子选项

<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

ma​​t-list-option 在激活时有 mat-option.mat-active 类，mat- option.mat-selected 选中时。

请将以下 CSS 添加到您的样式表中:

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

以下可用于设置悬停的样式:

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