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

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

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

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

for "@angular/material": "^10.2.7"

You add encapsulation: ViewEncapsulation.None property into your @Component decorator

@Component({  selector: '...',  templateUrl: '...',  styleUrls: ['...'],  encapsulation: ViewEncapsulation.None})export class examplePage{}

Then this CSS will work fine with !important

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

Note that ::ng-deep and /deep/ will not work on the new version of angular/material