在悬停时更改Angular材质扩展标题的颜色

Question

我有一个Angular Material 7扩展面板。当我将鼠标悬停在 mat-expansion-panel-header 之一上时，颜色正在改变。如何更改此颜色？

代码：

constructor(navParams: NavParams){
    let sId = this.navParams.get('id');
}

谢谢。

Answer 1

将此添加到您的组件CSS文件

as

Answer 2

您可以在标题上添加一个类，并将鼠标悬停时将背景色设置为currentColor

<mat-accordion>
    <mat-expansion-panel>
          <mat-expansion-panel-header class="disable_ripple">
            <mat-panel-title>
              Titel
            </mat-panel-title>
            <mat-panel-description>Hi</mat-panel-description>
          </mat-expansion-panel-header>
          Content
    </mat-expansion-panel>
</mat-accordion>

然后在CSS中

.disable_ripple:hover{
background: currentColor !important;
}

Working example