mat-dialog中嵌入mat-table时标题下方出现多余横线如何解决

原因说明 #

这条多余横线是Angular Material 为 mat-dialog-content 组件默认内置的顶部分隔边框，作用是区分对话框标题和内容区域，当嵌入的mat-table表头和该边框位置重合时，就会看起来像是表格标题下方多出来的异常横线。

修复方案 #

你可以根据自己的需求选择以下任意一种方案修复：

• 方案1：直接移除当前对话框的content顶部边框
  先在调用弹窗时给对话框添加自定义类，避免影响全局其他弹窗样式：

  this.dialog.open(你的弹窗组件名, {
    panelClass: 'no-top-border-dialog',
    // 其余原有配置保留
  });
  

  再添加对应样式（写在全局样式文件或者当前组件样式文件中均可，写在组件样式中需要加::ng-deep）：

  /* 全局样式写法 */
  .no-top-border-dialog .mat-dialog-content {
    border-top: none !important;
  }
  
  /* 组件样式写法 */
  ::ng-deep .no-top-border-dialog .mat-dialog-content {
    border-top: none !important;
  }
  

• 方案2：调整内容间距避免重合
  如果你需要保留对话框的默认分隔线，只需要给表格外层容器加一个顶部间距即可：

  .bottom-box {
    margin-top: 8px;
  }
  

• 方案3：若确认横线来自mat-table表头本身，可覆盖表头下边框样式

  ::ng-deep .mat-header-row {
    border-bottom: none !important;
  }
  

内容的提问来源于stack exchange，提问作者Shyam Sundar N