Angular Material mat-expansion-panel-body 样式未应用

Posted 2023-03-06

【中文标题】Angular Material mat-expansion-panel-body 样式未应用

【英文标题】：Angular Material mat-expansion-panel-body style not being applied

【发布时间】：2019-04-11 05:12:56

【问题描述】：

我的组件的 css 文件中有以下 css：

.mat-expansion-panel-body 
  padding: 0;

而且，所以我希望看到这条规则（即使被覆盖）出现在以下 dom 元素中：

<div class="mat-expansion-panel-body">...</div>

但是，我在开发工具中看到的只是：

.mat-expansion-panel-body 
  padding: 0 24px 16px;

我注意到这个元素没有其他 host 元素所具有的 _ngcontent-c19 类，所以我假设这是一个视图封装的案例。

但是，在阅读了 ::ng-deep 和 /deep/ 的弃用以及其他要弃用的封装穿透构造之后，在我的组件的 css 文件中设置此元素的样式有什么更好的解决方案？

【问题讨论】：

您使用的是哪个版本的 Angular 和 Material？

角度（6.1.7）/材质（6.2.1）

【参考方案1】：

我在组件 css 中设置了::ng-deep，它在我身边工作。

::ng-deep .mat-expansion-panel-body
     padding: 0;

【讨论】：

非常聪明，但是从现在开始，子元素中的每个扩展面板主体都将采用类似的样式，这是不想要的

如果您希望更改仅对该组件生效，请将 ng-deep 放入 :host 中。或者将 ng-deep 放在一个 className 中，并在所需的扩展面板中使用这个类，这样它就只影响这个扩展面板

【参考方案2】：

如果您不想使用 ::ng-deep，一种可能的解决方案是像这样在您的 styles.css 文件中设置样式。

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

这将删除填充，但要小心，因为它将从所有 mat-expansion-panel-body 元素中删除。您可以通过为扩展面板设置一个特定的类，然后在 styles.css 中执行类似的操作来绕过此问题

.my-special-class .mat-expansion-panel-body 
  padding: 0;

在这种情况下，您甚至不需要 !important。这是一个例子。

https://stackblitz.com/edit/angular-a6necw

【讨论】：

我认为这是一个有效的选择。但是，我想保留本地化样式，而不是创建特定于一个页面/组件的全局样式，因为随着项目的发展，它并不是真正可维护的。我试图为你的答案投票，但我还没有足够的声誉来展示它。

我不得不同意 - 这是一个不错的选择，但更愿意在模块的样式文件中保留特定的样式。

【参考方案3】：

为"@angular/material": "^10.2.7"

您将encapsulation: ViewEncapsulation.None 属性添加到您的@Component 装饰器中

@Component(
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None
)
export class examplePage

那么这个 CSS 将与 !important 一起正常工作

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

请注意，::ng-deep 和 /deep/ 将不适用于新版本的 angular/material

【参考方案4】：

下面是它对我的工作方式：

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

【参考方案5】：

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

效果最好，现在您不必考虑将这种样式应用于您的所有组件。 使用:host 仅适用于当前宿主组件