不应用角材料垫扩展面板体样式

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类，因此我假设这是视图封装的情况。

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

Answer 1

为了 "@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 2

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

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

Answer 3

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

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

这将除去填充物，但要小心，因为它将从所有垫子扩展面板主体元素中除去它。您可以通过在扩展面板中设置特定的类，然后在styles.css中执行类似的操作来绕过此操作

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

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

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

Answer 4

我::ng-deep在组件css中进行设置，它在我这边工作。

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