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;
}

Kishieel · Accepted Answer · 2021-03-17 20:28:38Z

6

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"
    }
}

answered Mar 17, 2021 at 20:28

Kishieel

2,0852 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Davi Cheli Miquelim Over a year ago

Does this code work in functional components?

Eric Er · Accepted Answer · 2023-08-18 07:44:00Z

0

I found below codes works for me

MUIDataTableHeadCell: {
  styleOverrides: {
    fixedHeader: { backgroundColor: "transparent" },
  },
},

It's reply from https://github.com/gregnb/mui-datatables/issues/162

edited Aug 18, 2023 at 7:44

answered Aug 18, 2023 at 7:32

Eric Er

503 bronze badges

Comments

Biniam Eyakem · Accepted Answer · 2023-11-28 19:36:25Z

0

  MUIDataTableHeadCell: {
    styleOverrides:{
      root: {
          backgroundColor: "red"
      }
    }
  },
  MUIDataTableBodyCell: {
    styleOverrides:{
      root: {
          backgroundColor: "yellow"
      }
    }
  },
  MuiTableFooter: {
    styleOverrides:{
      root: {
          backgroundColor: "wheat"
      }
    }
  },
  MuiToolbar: {
    styleOverrides:{
      root: {
          backgroundColor: "teal"
      }
    }
  }      
}

answered Nov 28, 2023 at 19:36

Biniam Eyakem

5546 silver badges21 bronze badges

Comments

user1094929 · Accepted Answer · 2024-06-27 23:39:34Z

0

This is the only solution that worked for me

 MuiDataGrid: {
    styleOverrides: {
        columnHeader: {
          backgroundColor: "black",
        },
...

answered Jun 27, 2024 at 23:39

user1094929

375 bronze badges

Collectives™ on Stack Overflow

React mui-datatables change header color

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related