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

【问题标题】：Angular Material mat-expansion-panel-body style not being appliedAngular Material mat-expansion-panel-body 样式未应用
【发布时间】：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）

标签： javascript css angular angular-material

【解决方案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 仅适用于当前宿主组件

【讨论】：

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

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