Angular - Remove mat-expansion-panel border & box-shadow

Question

Is there any way to remove the border, I think it's the box-shadow of a mat-expansion-panel from Angular Material? I want it to be all white, so you only would see Text and expansion arrow

<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

add mat-elevation-z0 class. Works like a charm, I needed to use that recently.

<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

I do it with css:

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

Answer 3

Yes, You can remove box-shadow and border: Just Put in CSS or SCSS (Real-time work)

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