Question

我找不到用于更改活动选项的文本颜色的CSS解决方案。也适用于悬停的选项。我在CSS中找不到有关样式化角度材料的任何文档。

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

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

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

这是我要设置样式的mat-option

<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具有mat-option.mat-active，它在选项处于活动状态时触发，在mat-option.mat-selected被选中时触发。将以下内容添加到您的CSS中：

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

您可以使用以下样式来进行悬停：

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

Answer 2

所有重要的ui样式css来自node_modules。因此，您可以按以下方式自定义材质CSS。

1）最好的方法是更改node_module css文件。如果要更改垫选择悬浮样式，首先，必须找到css文件。如果安装了靛蓝色主题，则可以找到此CSS文件。

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

班级为.mat-option:focus:not(.mat-option-disabled)

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

2）如果您不想更改模块css，则必须插入自定义css样式以保持最后 angular.json样式的css文件。

angular.json

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

最后一个CSS文件是styles.scss，因此您应该在其上插入样式。但是自定义CSS样式必须以"!important"

结尾

3）如果使用自定义角度材质主题，则可以找到此文件。

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

这样更改此文件上的css。 .mat-option { 颜色：mat-color（$ foreground，text）;

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

带有主动和悬停的样式垫选项-角材料

2 个答案: