所以我剛剛創(chuàng)建了一個(gè)擴(kuò)展面板，它工作得很好(雖然它是非常硬編碼)。然而，我需要從子面板部分完全刪除一個(gè)填充，我找不到合適的方法。

這是面板:

https://i.stack.imgur.com/hLoKn.png

你可以注意到有一個(gè)我想要消除的白色邊框(經(jīng)檢查，在div.mat-expansion-panel-body部分，有一個(gè)填充。當(dāng)我把它設(shè)置為0時(shí)，它就固定了，白邊也消失了。然而，我嘗試了以下方法。css:

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

但是沒(méi)有用。如果有人能解決這個(gè)問(wèn)題，我將不勝感激。

將樣式添加到全局樣式styles.css中，但這將影響整個(gè)應(yīng)用程序中的所有mat-expansion。

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

當(dāng)您將它添加到組件的樣式中而不是添加到全局樣式中時(shí)，它不起作用的原因是，樣式是封裝的，mat-expansion-body是在該組件的樣式之外創(chuàng)建的。

如果您想避免該樣式出現(xiàn)在每個(gè)mat-expansion-panel-body上，您可以創(chuàng)建一個(gè)類(lèi)，例如remove-mat-expansion-padding，并將其賦予mat-expansion-panel，如下所示:

<mat-expansion-panel class="remove-mat-expansion-panel-padding">

然后在styles.css中

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

因此，樣式只應(yīng)用于添加了remove-mat-expansion-panel-padding類(lèi)的mat-expansion-panel，而不是應(yīng)用程序中的所有擴(kuò)展面板

mat-expansion-panel-body由材料內(nèi)部創(chuàng)建。

例如另一種材料組件，對(duì)這些組件應(yīng)用更改(主要是樣式)是非常困難的。

解決這個(gè)問(wèn)題的另一種方法是從組件中刪除模擬封裝，設(shè)置為ViewEncapsulation.None。但是，這樣一來(lái)，應(yīng)用到組件中的樣式(css選擇器，如類(lèi)、標(biāo)記、id等)就可以用于應(yīng)用程序的所有組件。

為了防止在應(yīng)用程序中出現(xiàn)封裝樣式問(wèn)題，將#id應(yīng)用到組件容器(在本例中是mat-expansion-panel)是一個(gè)好主意，并在這個(gè)#id CSS選擇器中處理組件樣式，如下例所示:

<mat-expansion-panel id="my-component-name-style-container">
   <!-- your content -->
</mat-expansion-panel>

#my-component-name-style-container mat-expansion-panel-body {
   padding: 0;
}

將CSS #id選擇器應(yīng)用于組件名稱(chēng)的想法是防止其他組件具有相同的樣式(或多或少& quot封裝& quot#component-name樣式選擇器，因?yàn)榉庋b是none，所以它對(duì)所有應(yīng)用程序組件都可用)。

我希望我有所幫助

你可以嘗試下一種方法(使用SCSS):

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