Angular 材料垫扩展面板主体样式未应用

Question

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

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

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

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

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

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

我注意到该元素没有其他主机元素所具有的_ngcontent-c19 class，因此我假设这是视图封装的情况。

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

Answer 1

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

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

Answer 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

Answer 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

Answer 4

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

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

Answer 5

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

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

Answer 6

我将汇总所有答案并给出一些解决方案：

1. 在组件 CSS 中使用ng-deep类::ng-deep.mat-expansion-panel-body - 非常好的解决方案，但 Angular 团队决定弃用ng-deep
2. 使用encapsulation: ViewEncapsulation.None - 我个人认为是最糟糕的解决方案，因为您将设置可能与现有、新类或动态类冲突的全局类（如某些网站上的广告）
3. 全局styles.(s)css中的component-name.mat-expansion-panel-body - 唯一的缺点是您必须维护选择器，以防有人重命名组件的选择器
4. 移动全局styles.(s)css文件中的.mat-expansion-panel-body { padding: 0 }并从现在开始影响所有mat-expansion的组件。

就我个人而言，我仍然更喜欢选项 1 或 3，但在我的团队中，我们选择了第 4 个选项。

Answer 7

 Please use ngdeep code here before all inbuilt classes in angular::ng-deep.mat-expansion-panel-body{ padding: 0; }