Question

我有一个mat-select，但是在将每个mat-option的值颜色从悬停时的黑色更改为白色时遇到了麻烦。我可以通过使用

来更改它们

.mat-option {
  background-color: #e0e0e0;
  color: black !important;
}

但是它会将那些也不会悬浮在白色上的东西变成了我不想要的。如何将其更改为仅白色悬停？未悬停的物品将为黑色

     <mat-form-field id="filter" appearance="outline" class="formFields">
        <mat-select [(value)]="selected">
          <mat-option *ngFor="let number of quantity" [value]="number">{{number}}</mat-option>
        </mat-select>
      </mat-form-field>

这里是stackblitz

Answer 1

所有CSS更改要么需要在“ root” css中进行更改，要么使用ng-deep like

::ng-deep{
     .mat-option-text:hover:not(.mat-option-disabled) {
      background: #3071a9 !important;
      color: white;
    }

 .mat-option:hover {
      background: red !important;
      color: green !important;
    }
}

由于您要在此处更改标准控件，所以我的建议是在您的styles.css或基于CSS的页面中进行此更改。

更新请结点我认为您要修改的是mat-option-text:hover

Online Demo

Answer 2

我已经检查过您的堆叠闪击，您需要更改2点：

.mat-option:hover:not(.mat-option-disabled) {
  background: #3071a9 !important;
  color: white;
}

您应在此处删除!important。

.mat-option:hover {
  background: red !important;
  color: green !important;
}

并使用它显示悬停时的样式，重点是:hover。

悬停时造型垫选择-角材料

2 个答案: