我的組件的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文件中對該元素進行樣式化的更好的解決方案是什么呢？

我設置::ng-深入組件css，它在我身邊工作。

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

添加封裝:視圖封裝。無屬性添加到您的@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，一個可能的解決方案是在styles.css文件中設置樣式，如下所示。

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

這將移除襯墊，但要小心，因為這將從所有墊膨脹板車身元件上移除襯墊。您可以通過在panel上為expansi設置一個特定的類，然后在styles.css中執行類似的操作來繞過它

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

在這種情況下你甚至不需要！重要。這是一個例子。

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

效果最好，現在你不必考慮這種風格是否適用于你的所有組件。 使用:主機僅將其應用于當前主機組件

下面是它對我的作用:

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

我會匯總所有答案，給出一些解決方案:

使用ng-deep like ::ng-deep。組件CSS中的mat-expansion-panel-body——非常好的解決方案，但是Angular團隊決定深入研究 使用封裝:視圖封裝。無-我個人認為這是最糟糕的解決方案，因為你將設置全局類，這可能與現有的、新的或動態的類(如一些網站上的廣告)相沖突 組件名稱。全球風格的墊-膨脹-面板-車身。唯一的缺點是你必須維護選擇器，以防有人重命名組件的選擇器 移動。全局樣式中的mat-expansion-panel-body { padding:0 }。(s)css文件，并從現在起影響所有mat-expansions組件。 就我個人而言，我仍然傾向于第一或第三個選項，但在我的團隊中，我們選擇了第四個選項。

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

對自定義類使用ng-deep以避免樣式傳播

::ng-deep .nav-expansion-panel {
   .mat-expansion-panel-content{
   .mat-expansion-panel-body {
       padding: 0 5px  !important;
   }
  }
 }

在這上面浪費了大量時間之后，我創建了一個定制的css類，并將mat-accordion的東西包裝在一個div中。因為我有三個部分，現在都有很好的空間。

這個css:

.app-mat-accordion-vertical-margin {
  margin-top: 10px;
}

html:

<div class="app-mat-accordion-vertical-margin">
              <mat-accordion...
               ...
               ...
               </mat-accordion>
     </div>