角形-移除垫子展开面板边框和框阴影

Question

有什么方法可以删除边框，我认为它是Angular Material中box-shadow的{​​{1}}吗？我希望它全是白色，所以您只会看到“文字”和展开箭头

mat-expansion-panel

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

您也可以通过以下操作切换 mat-expansion-panel 类

<mat-accordion>
  <mat-expansion-panel [class.mat-expansion-panel]="false">
     ...
  </mat-expansion-panel>
</mat-accordion>

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); 
}

可以。

Answer 4

我用CSS做到这一点：

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

Answer 5

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

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