Question

我的组件的CSS文件中包含以下CSS：

notidata

而且，所以我希望看到以下dom元素会显示此规则（即使被覆盖）：

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

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

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

我注意到该元素没有其他 host 元素具有的 _ngcontent-c19 类，因此我认为这是视图封装的情况。

但是，在阅读了不赞成使用:: ng-deep和/ deep /以及其他不推荐使用的封装穿孔构造之后，从组件的css文件中对该元素进行样式设置的更好解决方案是什么？

Answer 1

如果您不想使用:: 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。这是一个例子。

Answer 2

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

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

Answer 3

下面是它对我的作用：

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

Answer 4

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

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

Answer 5

代表`"@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": "^10.2.7"