AgGrid选中行时单元格背景色被覆盖不可见问题求助

方案1：提升单元格背景色的CSS优先级 #

行选中样式的CSS优先级默认高于自定义单元格背景色，通过更具体的选择器或!important（优先用具体选择器，避免滥用!important）强制显示单元格背景：

/* 针对指定列（替换col-id的值为你的列ID） */
.ag-theme-alpine .ag-row-selected .ag-cell[col-id="targetColumn"] {
  background-color: #e6f7ff; /* 替换为你的单元格背景色 */
}

/* 针对所有带自定义背景类的单元格 */
.ag-theme-alpine .ag-row-selected .ag-cell.custom-cell-bg {
  background-color: #e6f7ff;
}

方案2：通过cellClassRules关联选中状态 #

在列定义中用cellClassRules为选中行的目标单元格单独绑定样式类，确保选中时依然保留背景色：

columnDefs: [
  {
    headerName: '状态列',
    field: 'status',
    cellClassRules: {
      'status-success': params => params.data.status === 'success',
      'status-success-selected': params => params.node.selected && params.data.status === 'success'
    }
  }
]

对应的CSS：

.status-success {
  background-color: #f6ffed;
}
/* 选中行时的单元格背景，可与普通状态一致或微调 */
.ag-row-selected .status-success-selected {
  background-color: #f6ffed;
}

方案3：自定义行选中样式（不覆盖单元格背景） #

如果不需要行选中的背景色，可将其设为透明，改用其他样式标识选中状态：

.ag-row-selected {
  background-color: transparent;
  border-left: 4px solid #1890ff; /* 左侧边框标识选中行 */
}

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