Динамически изменять цвет фона заголовка mat-extension-panel-header в зависимости от того, развернут он или нет

Question

Я изо всех сил пытался найти способ динамического изменения цвета фона заголовка панели расширения дизайна материала в зависимости от того, развернута ли панель.

Когда панель закрыта, я бы хотел, чтобы цвет фона был белым, но когда он развернут, я хочу изменить этот цвет на что-то другое.Я не вижу чего-то, на чем я могу основать это изменение, возможно я что-то упускаю.Я новичок в angular и думал, что смогу основать его на настройках [расширенного], но, похоже, это не так.

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

Вы должны предоставить CSS-селектор, который сильнее, чем стандартные, которые предоставляются угловым материалом.Это означает включение всех состояний, где угловое прибавление 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;
}

Answer 2

Angular Material добавляет динамические классы на основе состояния expanding.

mat-expanded будет тот, кого вы ищете.Проблема в том, что этот класс также привязывается к панели содержимого.Чтобы это исправить, вы можете просто скомбинировать его с селектором класса * 1005.

1007 * В целом все это будет выглядеть так:

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

Примечание: угловой материалтакже добавляет background: inherit в состояние наведения.

Если это не то поведение, которое вам нужно, просто перезапишите его так:

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