I need to remove the row color when a row is selected and hovered over in AgGrid tables using React. The problem is that when I select a row and hover over some of its elements, a default dark gray color is applied, which I don’t want in my code.

The code being used is a React code with CSS and Material.

Idk if I can modify something of my code or something in the gridoptions of the AgGrid table.

Thanks you for the asnwers.

.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-cell {
    background-color: #F3F9FB !important;
} */

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

.ag-row-hover .ag-row-selected::before {
    background-color: #BDDAE2 !important;
}

I tried to modify the css of the AgGrid and the GridOptions but nothing happens.