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

Question

我一直在努力寻找一种方法来根据面板是否扩展动态更改材料设计扩展面板标题的背景颜色。

当面板关闭时，我希望背景颜色为白色，但当它展开时，我想将该颜色更改为其他颜色。我没有看到可以根据此更改进行更改的内容，也许我遗漏了一些内容。我是 Angular 的新手，我想我可以将它基于 [expanded] 的设置，但事实并非如此。

 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>

原文由 Brandon Jerz 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Orlandster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你必须提供一个 CSS 选择器，它比 Angular Material 提供的默认选择器更强大。这意味着包括角度添加 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;
}

原文由 Yonatan Naor 发布，翻译遵循 CC BY-SA 4.0 许可协议