设置禁用的Mat扩展面板的样式

Question

我想知道是否有一种方法可以设置已禁用的Mat-Expansion-Panel的样式。 我在标题中有按钮，并且与它们进行交互可以切换面板，所以我相信最好只使用按钮切换面板并禁用面板本身。

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

Answer 1

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

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

---

根据这个答案，直到为:: ng-deep提供替代或替换之前，建议您继续使用它。

用什么代替:: ng-deep

Answer 2

如果您想使其更清洁，也可以采用Material方式，我建议使用内置的material scss函数和material scss变量。

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

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

另请参阅以获取更多信息： https : //material.angular.io/guide/theming