Измените цвет Углового материала расширения заголовка при наведении

Question

У меня есть панель расширения Angular Material 7.Когда я наводю курсор мыши на один из mat-extension-panel-header , цвет меняется.Как я могу изменить этот цвет?

Код:

<mat-accordion>
    <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              Titel
            </mat-panel-title>
            <mat-panel-description>Hi</mat-panel-description>
          </mat-expansion-panel-header>
          Content
    </mat-expansion-panel>
</mat-accordion>

Заранее спасибо.

Answer 1

Вы можете добавить класс к заголовку и установить цвет фона для 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;
}

Рабочий пример

Answer 2

Добавьте это в свой CSS файл компонента

mat-expansion-panel-header:hover {
    background-color: currentColor
}