Mui-datatables: Customise row hover and rowSelect in React

[futuredevgirl]

The mui-datatable is amazing. However, I am having issues with some of the customisation.
Is it possible to change the hover and rowSelect color for ReactJs?

I can see that the hover selector is at .MultiTableRow-root.MultiTableRow-hover: hover but can not seems to override the backgroundColor using createMuiTheme. I need to be able to change the color for both the hover and rowSelect selectors.

Finally is it possible to show and keep the Search bar open?

I am building the components using React and Storybook.js and if I am able to solve these, I will put them in GitHub and link back from here to show others how to do it.

Thank you.

Versions:
mui-database: 2.5.1
react: 16.8.6
storybook/react: 5.1.9

[gabrielliwerant]

This comment should help you get started with overriding the theme: https://github.com/gregnb/mui-datatables/issues/448#issuecomment-469430049.

You cannot currently default the search box to open unless you provide a default search via searchText.

[futuredevgirl]

Thank you so much @gabrielliwerant

[futuredevgirl]

I solved the 'hover' issue as follows:

MuiTableRow: { root: 
  { '&$hover:hover':
  {backgroundColor: '#55bebb'} } 
}

[LazzyLizzard]

{ '&$hover:hover':
{backgroundColor: '#55bebb'} }
}

This works only when row is not selected. I've got a weird solution working with selected row too:

MuiTableRow: { hover: { '&$root': { '&:hover': { backgroundColor: 'green' }, } }, }

If someone has a better solution please let me know.

[kkieffer]

I have the hover over row working with the code below, however there is one problem - this also highlights the footer background when it is hovered over. Is there anyway to turn off the hover over the footer? I tried to add the same code to the MuiTableFooter with white background but it had no effect.

createMuiTheme({
   overrides: {
        MuiTableRow: {
           root: {'&:hover': {backgroundColor: 'red'}}
        },
   },
});