如何强制更改垫扩展面板主体内的填充？

Question

所以我刚刚创建了一个扩展面板，它工作正常（尽管它是硬编码的）。然而，我需要从子面板部分完全消除填充，但我找不到合适的方法来做到这一点。

这是面板：

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

您可以注意到，有一个我想要消除的白色边框（经检查，在 div.mat-expansion-panel-body 部分中，有一个填充。当我将其设置为 0 时，它会修复并且白色边框消失.不过，我在 .css 中尝试了以下内容：

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

但这没有用。如果有人有解决方案来解决这个问题，我将不胜感激。

Answer 1

将样式添加到您的styles.css全局样式中，但这将影响整个应用程序中的所有垫扩展。

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

当您将其添加到组件的样式中与将其添加到全局样式中时它不起作用的原因styles.css是样式是封装的并且是mat-expansion-body在该组件的样式之外创建的。

如果您想避免该样式出现在每个 mat-expansion-panel-body 上，您可以创建一个类remove-mat-expansion-padding，并将其赋予 mat-expansion-panel，如下所示：

<mat-expansion-panel class="remove-mat-expansion-panel-padding">

然后在你的styles.css

<mat-expansion-panel class="remove-mat-expansion-panel-padding">

这样样式仅适用于mat-expansion-panel您添加类的那些样式，remove-mat-expansion-panel-padding而不适用于整个应用程序中的所有扩展面板