折叠时的垫子展开面板标题背景颜色

Question

我有一些垫子扩展面板。标头应具有指定的颜色。好的，等等。但是当我展开面板时，颜色会变回原色...

我该如何更改？

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

Answer 1

here已回答。

您也只需要为展开状态添加css：

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: #0070c040;
}

需要对悬停和扩展进行一些调整，但这应该会使发现它的其他人开始。

Answer 2

将encapsulation: ViewEncapsulation.None添加到@Component

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

然后CSS可以正常工作

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

使用了 @ angular / material版本+10