Change color of Angular material expansion header on hover

7
votes

I have an Angular Material 7 Expansion Panel. When I hover over one of the mat-expansion-panel-header the color is changing. How can I change this color?

Code:

<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>
2
htmlcssangularangular-material
mat-expansion-panel-header the color is changing?? can you be very specific how the color is changing? – Hameed Syed

2 Answers

9
votes

You can add a class to the header and set background color to currentColor on hover something like

<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>

then in css

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

Working example

8
votes

Add this to your component CSS file

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