反应 mui-datatables 改变 header 颜色

Question

我正在尝试更改 mui-datatables 的头部，但它无法正常工作。

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>

它没有改变 thead 的颜色。它一直显示一个白色的头。但是，如果我使用 Firefox 检查该元素，我可以看到 thead 元素的以下样式

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

Answer 1

每个 child .MUIDataTableHeadCell-fixedHeader 都有自己的背景，因此您宁愿更改此 class 然后 .MuiTableHeader-root

或者我觉得这样比较好

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

反应 mui-datatables 改变 header 颜色

React mui-datatables change header color

reactjs

mui-datatable