mat-expansion-panel-header background-color on collapse

Issue

i have some mat-expansion-panels. The header should have a specified color. Ok so on.. but when i expand the Panel, the color changes back to the root color...

How can i change this?

<mat-expansion-panel>
  <mat-expansion-panel-header [expandedHeight]="'50px'"  [collapsedHeight]="'50px'" id="test1">

    <mat-panel-title>
        <div class="matPanelSceneSymbol"><i class="material-icons md-36 md-light active">weekend</i></div>

        <div class="matPanelSceneText"> Testszene</div>
    </mat-panel-title>
    <mat-panel-description>
      <div class="matPanelSceneText">Szenenbeschreibung</div>
    </mat-panel-description>

  </mat-expansion-panel-header>

..... ....

css

/deep/ .mat-expansion-panel-header{
    padding-left: 0px !important;
    padding-top: 1px !important;
//  background-color: #0070c040  !important;
    padding-bottom: 1px !important;
}

/deep/ .mat-expansion-panel-header .mat-expanded{
    background-color: none;
}

#test1{
    background-color:  #0070c040  !important;
}

#test2{
    background-color:  #8e0fbc40  !important;
}

Solution

Add encapsulation: ViewEncapsulation.None into @Component

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None
})

Then CSS will work fine

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: red;
}

Worked on @angular/material version +10

Answered By - Mansour Alnasser