AG Grid rowGroup行样式设置失效，如何自定义分组行背景色

方案1：CSS样式覆盖 #

你之前的样式不生效是因为AG Grid分组行的单元格默认自带主题预设的背景色，会覆盖行级别的背景设置，使用以下样式即可生效：

/* 匹配所有层级分组行，仅需修改第一级分组可额外加上 .ag-row-level-0 限制 */
.ag-theme-alpine .ag-row.ag-row-group {
    background-color: #dddbdb !important;
}
/* 清除分组行内单元格的默认背景，避免遮挡行背景 */
.ag-theme-alpine .ag-row.ag-row-group .ag-cell {
    background-color: transparent !important;
}

/* 可选：修改分组行悬浮状态背景色 */
.ag-theme-alpine .ag-row.ag-row-group:hover {
    background-color: #c9c7c7 !important;
}
.ag-theme-alpine .ag-row.ag-row-group:hover .ag-cell {
    background-color: transparent !important;
}

方案2：使用AG Grid官方API配置（更稳定，推荐） #

无需写CSS覆盖，直接在gridOptions中添加getRowStyle回调，通过行属性判断是否为分组行后设置样式，不受主题样式优先级影响：

var gridOptions_PortCd = {
    // 保留你原有全部配置不变，新增以下配置项
    getRowStyle: params => {
        // 判断当前行是否为分组行，可额外添加 params.node.level === 0 仅修改第一级分组
        if (params.node.group) {
            return { backgroundColor: '#dddbdb' };
        }
        return null;
    }
};

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