角度 - 移除垫子扩展面板边框和盒子阴影

Question

有没有办法去除边框,我认为它box-shadow是mat-expansion-panel来自Angular材料？我希望它全白,所以你只会看到文字和扩展箭头

<mat-accordion>
 <mat-expansion-panel class="" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

Answer 1

添加mat-elevation-z0课程.像魅力一样,我最近需要使用它.

<mat-accordion>
 <mat-expansion-panel class="mat-elevation-z0" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

Answer 2

是的，您可以删除框阴影和边框：只需放入 CSS 或 SCSS（实时工作）

.mat-expansion-panel{
    box-shadow: none !important;
}

Answer 3

我用CSS做到这一点：

.mat-expansion-panel:not([class*='mat-elevation-z']) {
    box-shadow: none;
}