Angular - Remove mat-expansion-面板边框和框-阴影

Question

有没有办法去掉边框，我想这是Angular Material中的mat-expansion-panel的box-shadow？我希望它是全白的，这样你只会看到文本和扩展箭头

<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做到了：

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

Answer 3

.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: 0px 0px 0px -2px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); 
}

这个就行了。