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; }