Javascript 未应用角材料垫扩展面板车身样式

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

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

因此，我希望看到以下dom元素显示此规则（即使被重写）：

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

我注意到这个元素没有其他主机元素所具有的\ngcontent-c19类，因此我假设这是视图封装的情况

---

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

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

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

这将拆下衬垫，但要小心，因为它会将衬垫从所有垫子扩展板车身元件上拆下。通过将特定类设置到扩展面板，然后在styles.css中执行类似操作，可以绕过此问题

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

在这种情况下，你甚至不需要！重要的。这是一个例子

---

我在组件css中设置了

：ng deep

，它在我这边起作用

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

对于

“@angular/material”：“^10.2.7”

您将

封装：ViewEncapsulation.None

属性添加到@Component装饰器中

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

然后，这个CSS将工作良好！重要的

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

---

请注意，

：：ng deep

和

/deep/

在angular/material的新版本上不起作用，请参见下面它对我的作用：

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

效果最好，现在您不必考虑此样式将应用于所有组件。

---

使用

：主机

仅将其应用于当前主机组件

您使用的是什么版本的Angular and Material？Angular（6.1.7）/Material（6.2.1）我认为这是一个有效的替代方案。但是，我希望保留本地化样式，而不是创建特定于一个页面/组件的全局样式，因为随着项目的增长，它实际上不可维护。我试图更新你的答案，但我还没有足够的声誉来展示它。我必须同意-这是一个很好的选择，但更愿意在模块的样式文件中保留特定的样式。非常聪明，但从现在起，子元素中的每个扩展面板主体都将采用类似的样式，这是不需要的

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

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