Angular Material表格行hover时上下边框变蓝色效果失效如何解决？

问题原因 #

你的样式不生效主要有3个常见原因：

1. Angular组件默认开启了样式封装，组件内写的样式优先级不足以覆盖Angular Material自带的表格默认样式
2. Mat表格默认给.mat-row设置了下边框，你只修改.mat-cell的边框会被默认行边框覆盖
3. 表格默认的border-collapse: collapse属性会导致相邻行的边框重叠，就算边框变色也会出现显示异常

解决方案 #

你可以选择以下两种方式修改，新手推荐第一种：

方式1：把样式写到全局样式文件（通常是src/styles.css）

直接复制以下代码替换你原来的表格相关CSS即可：

/* 全局修改Mat表格基础属性 */
table.mat-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0; /* 取消单元格边框重叠 */
}

.mat-form-field {
  font-size: 14px;
  width:30%;
}
td, th {
  width: 25%;
}

/* 去掉默认行下边框 */
table.mat-table .mat-row {
  border-bottom: none;
}

/* 单元格基础样式，预设置透明边框避免悬停时行高跳动 */
table.mat-table .mat-cell {
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  cursor: pointer;
}

/* 行悬停样式 */
table.mat-table .mat-row:hover .mat-cell {
  color: blue;
  border-color: blue;
}

方式2：写在当前组件的CSS文件中

需要给选择器添加::ng-deep穿透样式封装，代码如下：

/*loader*/
.loader-box{
  height: 80vh;
}

/*table*/
::ng-deep table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.mat-form-field {
  font-size: 14px;
  width:30%;
}
td, th {
  width: 25%;
}

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

::ng-deep .mat-row .mat-cell {
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  cursor: pointer;
}
::ng-deep .mat-row:hover .mat-cell {
  cursor: pointer;
  color: blue;
  border-color: blue;
}

异常排查 #

如果修改后还是不生效，可以打开浏览器F12审查元素，查看.mat-cell的边框样式是否被其他更高优先级的样式覆盖，如果是可以在对应CSS属性后加!important临时解决（不推荐长期使用）。

内容的提问来源于stack exchange，提问作者Emanuel bass