Angular Material mat-mdc-table行悬停背景色不均问题求助

问题根源在于你使用了透明背景色（rgba(0, 0, 0, 0.04)或#0000000A），行的padding区域会与父元素的白色背景叠加，而单元格（mat-mdc-cell）虽继承行的背景色，但受样式优先级或内部元素影响，导致颜色不一致。以下是几种可行的解决方法：

方法一：使用不透明浅灰色背景 #

直接替换为无透明度的浅灰色，避免背景叠加问题，同时匹配Material Design默认hover视觉效果：

.mat-mdc-row:hover {
    cursor: pointer;
    background-color: #f5f5f5 !important;
}

方法二：同步行与单元格的hover背景色 #

确保悬停时行内所有单元格应用相同背景色，覆盖任何默认样式：

.mat-mdc-row:hover,
.mat-mdc-row:hover .mat-mdc-cell {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.04) !important;
}

此方法能让行的padding区域与单元格内容区域背景色完全统一，消除叠加差异。

方法三：清除单元格内部元素的背景干扰 #

若单元格内嵌套了带白色背景的元素，需让这些元素继承行的hover背景色：

.mat-mdc-row:hover .mat-mdc-cell * {
    background-color: inherit;
}

额外提示 #

在Angular Material的mat-mdc-table中，默认内边距设置在mat-mdc-cell上，建议避免直接给mat-mdc-row设置padding，以免引发布局和样式冲突。如需调整内边距，优先修改mat-mdc-cell的padding值。

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