如何修改AgGridReact中选中行的默认行悬停颜色

核心修复思路 #

AgGrid Material主题中，选中行悬停的默认样式优先级高于自定义样式，需要用精准的组合选择器同时匹配「选中+悬停」状态的行，才能覆盖默认的深灰色背景。

修改后的CSS代码 #

.ag-theme-material .ag-root-wrapper {
    border-radius: 20px;
}

.ag-theme-material .ag-cell:hover {
    background-color: #F3F9FB !important; 
}

.ag-theme-material .ag-row-selected::before {
    background-color: #E4F3F7 !important;
}

/* 关键：覆盖选中行悬停的默认背景样式 */
.ag-theme-material .ag-row-selected.ag-row-hover::before {
    background-color: #E4F3F7 !important; /* 可替换为你需要的自定义颜色 */
}

/* 确保单元格不会继承悬停的默认背景 */
.ag-theme-material .ag-row-selected.ag-row-hover .ag-cell {
    background-color: transparent !important;
}

.ag-theme-material .ag-header-cell:hover {
    background-color: #BDDAE2 !important;
}

关键说明 #

1. 原代码中.ag-row-hover .ag-row-selected::before的选择器顺序错误，AgGrid的行是同时拥有ag-row-selected和ag-row-hover两个类，必须将两个类放在同一个元素选择器中，才能匹配到正确的状态。
2. 添加.ag-row-selected.ag-row-hover .ag-cell是为了避免单元格在悬停时单独出现背景色偏移，保证选中行整体样式统一。

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