Angular - 删除垫扩展面板边框和框阴影答案

【问题标题】：Angular - Remove mat-expansion-panel border & box-shadowAngular - 删除垫扩展面板边框和框阴影
【发布时间】：2019-01-13 19:49:40
【问题描述】：

有什么办法可以去掉边框，我认为是 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>

【问题讨论】：

看看theming guide，用CSS把它去掉

标签： angular angular-material

【解决方案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>

【讨论】：

@Sergi 遗憾的是我不知道。尝试使用 DevTools 检查样式
移除悬停样式.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: white; }
使用有棱角的材料，这是做到这一点的完美方式。谢谢。

【解决方案2】：

您也可以通过以下方式切换类mat-expansion-panel

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

【讨论】：

此解决方案移除了阴影，但也禁用了动画。

【解决方案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); 
}

这样就可以了。

【讨论】：

【解决方案4】：

我用 css 来做：

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

【讨论】：

简单而简短。再好不过了！

【解决方案5】：

是的，您可以移除 box-shadow 和边框：只需放入 CSS 或 SCSS（实时工作）

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

【讨论】：