I am currently using AG GRID in my project and have implemented the RowGroup functionality for one of the columns,

Here's my code: 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,
    };

I'm able to feed the grid some JSON data, and all looks great (I'm not including the rest of the code as I do not think it is relevant to the question).

Now what's happening is, the Grid looks totally great, however I want to be able to style to rowGroup row in my grid because it is dark and I'd want it to just to be plain white.

here's what mine looks like:

mygrid

Sorry for the link only (SO won't let me paste image).

In essence, how do I set the COLOR of the ROW GROUP to something different, I've tried things like:

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

but that doesn't work. I'm not sure why it shows up as navy blue rather than just plain white or grey or something, but my hopes are to change it. Any pointers?

Goal is for it to look like this (In AG GRID website example)

Example

I've looked on AG GRID website's documenation but they do not provide info as how to style it.

EDIT: I changed it like so, and now it looks like this:

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

updated