The internal creation of mat-expansion-panel-body is handled by Material.
Similar to other Material components, making changes (especially in terms of styles) to these components can be quite challenging.
To address this issue, one possible solution is to remove the emulated encapsulation from your component by setting it to ViewEncapsulation.None. However, doing so will make the styles applied to your component (such as classes, tags, ids, etc.) accessible to all components in your application.
To avoid styling conflicts within your application, it is recommended to assign an #id to your component container (e.g., the mat-expansion-panel) and define your component's styles within this specific #id CSS selector. Here's an 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;
}
By using a CSS #id selector that includes the component name, you can prevent other components from adopting the same style (essentially keeping it somewhat "encapsulated" within the #component-name style selector, which is available to all application components due to the lack of encapsulation).
I hope this explanation has been helpful.