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

【问题标题】：How can I forcefully change the padding inside a mat-expansion-panel-body?如何强制更改垫子扩展面板体内的填充？
【发布时间】：2022-02-08 03:02:33
【问题描述】：

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

这是面板：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

将它添加到组件的样式中时它不起作用的原因 vs 将其添加到全局 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

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

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

【讨论】：

【解决方案2】：

mat-expansion-panel-body 由 Material 内部创建。

比如另一个 Material 组件，对这些组件应用更改（主要是样式）是非常困难的。

解决此问题的替代方法是从组件中删除模拟封装，设置为ViewEncapsulation.None。但是，这样，应用到组件中的样式（css 选择器，如类、标签、id 等）可用于应用程序的所有组件。

为了防止在您的应用程序中出现封装样式问题，最好将#id 应用于您的组件容器（在本例中为mat-expansion-panel），并在此#id CSS 选择器中使用您的组件样式，例如例子：

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

应用带有组件名称的 CSS #id 选择器的想法是防止其他组件具有相同的样式（或多或少“封装”到 #component-name 样式选择器中，它适用于所有应用程序组件，因为封装为none)。

希望对你有所帮助

【讨论】：