React mui-datatables change header color

Question

I'm trying to change the head of mui-datatables, but it is not working properly.

import MUIDataTable from "mui-datatables";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
...

// here I set the them
const getMuiTheme = () => createMuiTheme({
    overrides: {
        MuiTableHead: {
            root: {
                backgroundColor: "#c1e1ec"
            }
        }
    }
});

...

// rendering
<MuiThemeProvider theme={getMuiTheme()}>                                                    
    <MUIDataTable
        title={"Existing Users"}
        data={users}
        columns={columns}
        options={options}
    />
</MuiThemeProvider>

It is not changing the color of the thead. It keep showing a white thead. However, if I inspect the element with Firefox, I can see the following styles for the thead element

.MuiTableHead-root {
    display: table-header-group;
    background-color: #c1e1ec;
}

Answer 1

Each child .MUIDataTableHeadCell-fixedHeader has own background so you rather should change this class then .MuiTableHeader-root

Or in this way which I think is better.

MuiTableCell: {
    head: {
        backgroundColor: "red !important"
    }
}