如何为mat-table的sticky列实现行悬停elevation阴影效果

问题根因 #

这是Angular Material Table 自带的sticky列样式特性导致的：设置了sticky属性的列会自动生成mat-table-sticky类，默认会配置独立的背景色、更高的z-index层级，父级.mat-row的hover样式默认无法覆盖sticky单元格的视觉表现，同时父元素设置的transform属性不会作用于sticky定位的子元素，所以之前的写法仅对普通列生效。

解决方案 #

方案1：调整样式选择器覆盖默认配置 #

将hover效果同时作用于行内所有单元格，覆盖sticky的默认样式即可：

/* 统一行hover的光标样式 */
.mat-row:hover {
    cursor: pointer;
}
/* hover时所有单元格应用统一样式，覆盖sticky默认配置 */
.mat-row:hover .mat-cell,
.mat-row:hover .mat-table-sticky {
    @include mat-elevation(6);
    /* 父级transform不作用于sticky元素，所以移到单元格下 */
    transform: scale(1);
    /* 覆盖sticky默认背景，保证视觉统一 */
    background-color: transparent !important;
}

方案2：添加样式穿透（组件内样式不生效时使用） #

如果是在组件内写的样式不生效，是Angular视图封装拦截了组件内样式对Material内置类的修改，可以添加穿透声明，注意加:host限制作用域避免全局污染：

:host ::ng-deep .mat-row:hover .mat-table-sticky {
    background-color: transparent !important;
    box-shadow: inherit !important;
    transform: scale(1) !important;
}

注意事项 #

• 原样式中写在.mat-row上的transform: scale(1)没有实际缩放效果，也可以直接删除。
• 如果需要自定义hover背景色，直接在上述hover单元格选择器中设置对应的background-color值即可，不需要额外给sticky单元格嵌套外层元素。

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