为禁用的 Mat-Expansion 面板设置样式

【问题标题】：Set Styles for disabled Mat-Expansion Panel为禁用的 Mat-Expansion 面板设置样式
【发布时间】：2018-11-21 16:41:17
【问题描述】：

我想知道是否有办法为已禁用的 Mat-Expansion-Panel 设置样式。我在标题中有按钮并与它们交互会切换面板，所以我认为最好只用按钮切换面板并禁用面板本身。

但是，当我禁用面板时，面板内的所有项目都是灰色的。有没有办法删除禁用样式或覆盖它们？

【问题讨论】：

【解决方案1】：

在组件样式表中使用以下内容会将禁用的扩展面板颜色恢复为默认值。

::ng-deep .mat-expansion-panel-header[aria-disabled=true] {
    color: rgba(0,0,0,.87);
}

根据这个 SO 答案，在为 ::ng-deep 提供替代方案或替代品之前，建议继续使用它......

【讨论】：

【解决方案2】：

如果你想让它更干净，我也建议使用内置材质 scss 函数和材质 scss 变量。

::ng-deep mat-expansion-panel-header {
    color: mat-color($accent);
}

[aria-disabled=true] 不需要当两个状态都禁用时 true 和 false 应该具有相同的颜色。

【讨论】：