Set Styles for disabled Mat-Expansion Panel

Question

I was wondering if there was a way to set the styling for a Mat-Expansion-Panel that's been disabled. I have buttons in the header and interacting with them toggles the panel so I believe it better to just toggle the panel with a button and disable the panel itself.

However, when I disable the panel it grey's out all the items inside the panel. Is there a way to remove the disable styles or overwrite them?

Answer 1

Using the following in your component style sheet will return the disabled expansion panel color back to default.

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

---

Per this SO answer, until an alternative or replacement is provided for ::ng-deep the recommendation is to continue using it...

What to use in place of ::ng-deep