Mui-datatables: Not able to override styling for MUIDataTableToolbar using MuiTheme

[arpankan]

First of all thank you for creating this component. Saved us tons of time 👍 I am trying to add a background color to the MUIDataTableToolbar (The one with all the tools on the top right side of the component). But I dont see the styling reflect in the component.

Expected Behavior

Current Behavior

When the overrides section is added in the createMuiTheme(), the styles for MUIDataTableToolbar dont take effect, but the styles for MUIDataTableBodyCell do.

Steps to Reproduce (for bugs)

1. Access : https://codesandbox.io/s/6lqr6mxn03
2. Change the styles for MUIDataTableToolbar(root/actions)
3. Verify if the changes reflect on page
   4.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0 |
| MUI-datatables | 2.0.0-beta-19 |
| React | 16.3.2 |
| browser | Chrome |
| etc | |

[gregnb]

Thanks for posting this issue. It reminded me I needed to remove some old code that blocked the customized styling for this component from happening.

[gregnb]

Published fix in the latest version

[arpankan]

👍 Awesome . Thank you for the quick response

[pratikguru]

Hey,

I hope this message is seen. I have a similar issue but with the HeaderRow not being able to change its background color. I tried a few classnames but i couldn't figure it out.

I tried to over ride the MUIPaper so that the entire body changes its background color but it didn't change the header row's color.

getMuiTheme = () => createMuiTheme({
      overrides: {
        MUIDataTableBodyCell: {
          root: {
            backgroundColor: "#1D252D",
            color: "rgb(255, 255, 255)",
            borderBottom: "none"
          }
        },
        MUIDataTableHead: {
          root: {
            backgroundColor: "#1D252D",
            color: "rgb(255, 255, 255)",
            borderBottom: "none"
          }
        },
        MUIDataTableToolbar: {
          root: {
            backgroundColor: "#1D252D",
            color: "rgb(255, 255, 255)"
          }
        },
        MUIDataTablePagination: {
          root: {
            backgroundColor: "#1D252D",
            color: "rgb(255, 255, 255)"
          }
        },
        MUIDataTableDivider: {
          root: {
            backgroundColor: "#1D252D",
            color: "rgb(255, 255, 255)"
          }
        }
      }
  })

This is for individual body components.

getMuiTheme = () => createMuiTheme({
      overrides: {
        MuiPaper: {
          root: {
            backgroundColor: "#1D252D",
            color: "#9DA0B1"
          },
          square: false
        }
      }
  })

And this for the Paper.

When i tried to apply the theme for the paper it coloured everything out except the header.

[gabrielliwerant]

To change header color, you need:

overrides: {
  MUIDataTableHeadCell: {
    fixedHeader: {
      background: 'blue'
    }
  },
  MUIDataTableSelectCell: {
    headerCell: {
      background: 'blue'
    }
  }
}

[maikuts]

I am trying to edit the position of the header.
In your CodeSandbox example worked but on my table dont.

[hernanif1]

MUIDataTableHeadCell: {
  fixedHeaderCommon: {
    backgroundColor: "transparent"
  }
}

[usahai]

MUIDataTableHeadCell: {
  fixedHeaderCommon: {
    backgroundColor: "transparent"
  }
}

Fixed my issue. Thanks a lot! Had a lot of trouble finding this.

[Aurelissima]

Is it possible, that I can not override MUIDataTableHeadCell? I get this error: 'MUIDataTableHeadCell' does not exist in type 'Overrides'.