Expansion-panel from material angular 4

Question

I hava an angular 4.4.4 application with material 2.0.0-beta.12 and I want to use the mat-expansion-panel from material design.

This is my code

Answer 1

if you add it to the main styles.scss it works (not at the component style level)

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

Answer 2

This works 100%.

Add this inside your style.css:

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

Answer 3

for @angular/material version +10

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

@Component({
  selector: '...',
  ...
  encapsulation: ViewEncapsulation.None
})
export class myApp{}

Then this will work

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

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

Answer 4

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

Answer 5

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;
}

Answer 6

This code below will work when added to your components css file

:host {
  ::ng-deep {
    .mat-expansion-panel-spacing {
      margin: 0px 0 !important;
    }
  }
}