如何根据展开状态动态修改mat-expansion-panel-header背景色

嘿，别着急！作为Angular新手遇到Material组件样式问题太正常了，我来帮你搞定这个动态修改header背景色的需求~

你思路是对的，确实可以利用面板的展开状态来做，但问题出在CSS选择器的写法和Angular的视图封装上，我给你一步步修正：

问题分析 #

当mat-expansion-panel展开时，Angular Material会给这个面板元素添加一个.mat-expanded类，而不是直接给header加。你之前写的mat-expanded是错误的选择器，而且没有关联到父元素的状态，所以样式不会生效。另外，Angular默认的视图封装会隔离组件样式，可能需要一点小技巧来穿透到Material组件的内部样式。

解决方案 #

修改你的CSS代码，用父元素的.mat-expanded类来控制header的样式，同时处理视图封装的问题：

/* 默认状态（收起时）的header样式 */
mat-accordion mat-expansion-panel mat-expansion-panel-header {
  font-size: 1.25em;
  background-color: white;
  color: #00838f;
  font-weight: 500;
}

/* 展开状态下的header样式 */
mat-accordion mat-expansion-panel.mat-expanded mat-expansion-panel-header {
  background-color: #e0f7fa; /* 这里换成你想要的展开时的背景色 */
}

/* 其他原有样式保留 */
mat-accordion mat-expansion-panel .mat-expansion-panel-body {
  background-color: white;
  padding-top: 5px;
}

.mat-expansion-indicator::after {
  color: #00838f;
}

如果上面的样式还是不生效，那就是Angular视图封装的锅，你可以在选择器前加上::ng-deep来穿透封装（注意：虽然::ng-deep被标记为废弃，但目前在Material组件中还是常用的解决方式，或者你也可以把这段样式放到全局的styles.scss文件里）：

::ng-deep mat-accordion mat-expansion-panel.mat-expanded mat-expansion-panel-header {
  background-color: #e0f7fa;
}

为什么你的原有代码不行？ #

你之前写的mat-expansion-panel-header mat-expanded是错误的，因为mat-expanded不是header的类，而是属于mat-expansion-panel的类，正确的层级应该是父面板元素拥有这个类，然后选择它下面的header。另外，你重复设置了background-color: white和background: white，其实留一个就够啦~

这样修改后，当面板收起时header是白色，展开时就会变成你设置的颜色啦！

内容的提问来源于stack exchange，提问作者Brandon Jerz