CODEWITHSUNDEEP
reactjsmui-datatable
myTest532 myTest532
myTest532 myTest532

Reputation: 2381

React mui-datatables change header color

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

Upvotes: 1

Views: 11017

Answers (4)

user1094929
user1094929

Reputation: 37

This is the only solution that worked for me

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

Upvotes: 0

Biniam Eyakem
Biniam Eyakem

Reputation: 554

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

Upvotes: 0

Eric Er
Eric Er

Reputation: 50

I found below codes works for me

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

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

Upvotes: 0

Kishieel
Kishieel

Reputation: 2053

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

Upvotes: 6

Related Questions