How can I forcefully change the padding inside a mat-expansion-panel-body?-CodePudding

so I just created an expansion panel and it's working fine (it's very hardcoded though). I need to, however, eliminate a padding entirely from the subpanel part and I can't find a proper way to do it.

Here's the panel:

https://i.stack.imgur.com/hLoKn.png

You can notice that there is a white border that I want to eliminate (upon inspection, in the div.mat-expansion-panel-body part, there is a padding. When I set it to 0, it fixes and the white borders vanish. I tried however the following in my .css:

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

But it didn't work. If anyone's got a solution to fix that I'd be greatly appreciated.

CodePudding user response：

Add the styles to your styles.css which is the global style, but this will affect all of the mat-expansions throughout your application.

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

The reason it's not working when you add it into the style of your components vs adding it in the global styles.css is that the styles are encapsulated and the mat-expansion-body is created outside the style of that component.

If you want to avoid that style appearing on every mat-expansion-panel-body you can create a class for example remove-mat-expansion-padding and give it to the mat-expansion-panel like this:

<mat-expansion-panel >

And then in your styles.css

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

So that the styles only apply on those mat-expansion-panel in which you add the class remove-mat-expansion-panel-padding instead of all the expansion panels throughout the app

CodePudding user response：

The mat-expansion-panel-body is created internaly by Material.

Such as another Material components, to apply changes (mainly styles) to these components is very hard.

The alternative to solve this problem is remove the emulated encapsulation from your component, setting to ViewEncapsulation.None. But, with that, the styles applied into your component (css selectors, like classes, tags, ids, etc) are available for all components of your application.

To prevent encapsulation styles problems into your application, is a good idea apply an #id to your component container (in this case, the mat-expansion-panel), and work your component style inside this #id CSS selector, like the example:

<mat-expansion-panel id="my-component-name-style-container">
   <!-- your content -->
</mat-expansion-panel>

#my-component-name-style-container mat-expansion-panel-body {
   padding: 0;
}

The idea of apply a CSS #id selector with the component name is prevent that other components have the same style (more or less "encapsulated" into the #component-name style selector, which is available for all application components because the encapsulation is none).

I hope I've helped