3

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?

Haq.H
  • 863
  • 7
  • 20
  • 47

2 Answers2

6

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

Marshal
  • 10,499
  • 2
  • 34
  • 53
0

If you want to make it cleaner, also in a Material way i would recommend to use the builtin material scss function and material scss variable.

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

[aria-disabled=true] is not required when both states disabled true and false should have the same color.

See also for more information: https://material.angular.io/guide/theming

Serkan Sipahi
  • 691
  • 6
  • 19