Angular Material mat-expansion-panel-body style not being applied

Question

I have the following css in my component's css file:

.mat-expansion-panel-body {
  padding: 0;
}

And, so I would expect to see this rule (even if overridden) to show up for the following dom element:

<div class="mat-expansion-panel-body">...</div>

But, all I see being applied in dev tools is:

.mat-expansion-panel-body {
  padding: 0 24px 16px;
}

I noticed that this element does not have the _ngcontent-c19 class that the other host elements do, and so I assume this is a case of view encapsulation.

However, after reading around with the deprecation of ::ng-deep and /deep/ and other encapsulation piercing constructs to be deprecated, what is a better solution to styling this element from within my component's css file?

Answer 1

I set up ::ng-deep in component css, it worked in my side.

::ng-deep .mat-expansion-panel-body{      padding: 0; } 

Answer 2

One possible solution if you don't want to use ::ng-deep is to set the style in your styles.css file like so.

.mat-expansion-panel-body {
  padding: 0 !important;
}

This will remove the padding, but be careful as it will remove it from all of the mat-expansion-panel-body elements. You can bypass this by setting a specific class to your expansion panel and then doing something like this in styles.css

.my-special-class .mat-expansion-panel-body {
  padding: 0;
}

In this case you don't even need !important. Here is the example of this.

https://stackblitz.com/edit/angular-a6necw