Angular 材料垫扩展面板主体样式未应用

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

Answer 3

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

Answer 4

Below how it worked for me:

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

Answer 5

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

Works the best, now you don't have to think about this style being applies across all your components. Using :host applies it only to the current host component

Answer 6

I will aggregate all the answers and give some solutions:

1. use ng-deep like ::ng-deep.mat-expansion-panel-body in your component CSS - pretty nice solution but Angular team decided to depracte ng-deep
2. use encapsulation: ViewEncapsulation.None - personally I think is the worst solution as you will set global classes which can conflict with existing, new classes or dynamic ones (like ads on some sites)
3. component-name.mat-expansion-panel-body in the global styles.(s)css - the only disadvantage is that you have to maintain the selector in case someone renames the component's selector
4. move the .mat-expansion-panel-body { padding: 0 } in the global styles.(s)css file and affect all mat-expansion s components from now on.

Personally I still prefer the option 1 or 3, but in my team we chose the 4th option.

Answer 7

 Please use ngdeep code here before all inbuilt classes in angular::ng-deep.mat-expansion-panel-body{ padding: 0; }