Actualmente estoy usando AG GRID en mi proyecto y he implementado la funcionalidad RowGroup para una de las columnas,

Aquí está mi código: HTML

 <div id="myGrid" style="height: 400px;width:80%; display:none" class="ag-theme-alpine"> </div>

JS:

 var gridOptions_PortCd = { suppressClickEdit: true, columnDefs: [ { headerName: "Col1", field: "Col1", rowGroup: true, hide: true }, { headerName: "Val1", field: "val2", minWidth: 200 }, ], defaultColDef: { sortable: true, filter: true, resizable: true, }, autoGroupColumnDef: { headerName: 'ColA', minWidth: 200, }, groupDisplayType: 'singleColumn', animateRows: true, };

Puedo alimentar la cuadrícula con algunos datos JSON, y todo se ve muy bien (no incluyo el resto del código porque no creo que sea relevante para la pregunta).

Ahora lo que está sucediendo es que la Cuadrícula se ve muy bien, sin embargo, quiero poder aplicar estilo a la fila del grupo de filas en mi cuadrícula porque está oscura y me gustaría que fuera completamente blanca.

así es como se ve el mío:

migrid

Lo siento solo por el enlace (SO no me deja pegar la imagen).

En esencia, ¿cómo configuro el COLOR del GRUPO DE FILAS en algo diferente? He intentado cosas como:

 .ag-theme-alpine .ag-row.ag-row-level-0 { background-color: #dddbdb!important; }

pero eso no funciona. No estoy seguro de por qué aparece como azul marino en lugar de simplemente blanco o gris o algo así, pero espero cambiarlo. ¿Algún consejo?

El objetivo es que se vea así (en el ejemplo del sitio web de AG GRID)

Ejemplo

He buscado en la documentación del sitio web de AG GRID pero no proporcionan información sobre cómo diseñarlo.

EDITAR: Lo cambié así, y ahora se ve así:

 .ag-cell { background-color: yellow !important; }

actualizado