Expansion-panel from material angular 4

Instead of /deep/ you should use ::ng-deep, which is an alias provided by angular. Support for /deep/ etc. is already removed from chrome browser. So in your example that would be:

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

this one worked for me

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

I hope that will work for you


This works 100%.

Add this inside your style.css:

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

In your style.css or your components style you need to add the following css:

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

This is due to view encapsulation. You can read more about this here: https://angular.io/guide/component-styles

Update:

The use of /deep/, ::ng-deep to modify the styles of material components has been deprecated. See this link.

However, using @angular/core ^6.1.0 and @angular/material ^6.4.6 I was able to change the style of Angular Material's Expansion panel without having to add anything specific. It seems like you can now simply change the style in your components css file. So this should work:

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

You can read here for more information about the deprecation of /deep/, ::ng-deep here.