根据是否展开,动态更改mat-expansion-panel-header的背景颜色

Question

我一直在努力寻找一种方法来动态改变材料设计扩展面板标题的背景颜色,具体取决于面板是否展开.

当面板关闭时,我希望背景颜色为白色,但是当它被展开时,我想将该颜色更改为其他颜色.我没有看到我可以根据这个改变做出的事情,也许我错过了一些东西.我是棱角分明的新人,并且认为我只能将它从[扩展]的设置中解脱出来,但事实并非如此.

mat-accordion
mat-expansion-panel
mat-expansion-panel-header
mat-expanded{
  font-size: 1.25em;
  background-color: white;
  background: white;
  color: #00838f;
  font-weight: 500;
}



mat-accordion
mat-expansion-panel
mat-expansion-panel-header {
  font-size: 1.25em;
  background-color: white;
  background: white;

  color: #00838f;
  font-weight: 500;
}


  mat-accordion
  mat-expansion-panel
  .mat-expansion-panel-body {
  background-color: white;
  padding-top: 5px;
}
.mat-expansion-indicator::after {
  color: #00838f;
}

<mat-accordion multi="true">
<mat-expansion-panel [expanded]="selectedBenefitCategories.indexOf(cat)!=-1" [hidden]="selectedBenefitCategories.indexOf(cat)===-1">
  <mat-expansion-panel-header>
    <i class="search-category-icon far fa-star"></i> &nbsp; {{cat}}
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>

    some content

  </ng-template>
</mat-expansion-panel>
</mat-accordion>

Answer 1

Angular Material会根据expanding状态添加动态类.

mat-expanded将是你正在寻找的那个.问题是这个类也附加到面板内容.为了解决这个问题,您可以简单地将它与.mat-expansion-panel-header类选择器结合起来.

总结一下,这将是这样的:

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

注意:Angular Material也会添加background: inherit悬停状态.

如果这不是你想要的行为,只需像这样覆盖它:

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

Answer 2

您必须提供一个比 Angular Material 提供的默认选择器更强大的 CSS 选择器。这意味着包括 Angular 添加的所有状态background-color: inherit：

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