Material-ui: [Table] selected and hover backgroundColor should use theme instead of hard coded colors

[msteinmn]

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TableRow/TableRow.js

[oliviertassinari]

@msteinmn Feel free to override the values with the theme.overrides.MuiTableRow theme path.

[petercutting]

this might be related. My theme override has been working OK until I updated to 4.9.5.

          MuiTableRow: {
            root: {  "&$selected": { backgroundColor: '#f09628', }  }
          },

Now my override is ignored and I get the following instead

.MuiTableRow-root.Mui-selected, .MuiTableRow-root.Mui-selected:hover {
    background-color: rgba(240, 150, 40, 0.08);
}

[oliviertassinari]

@petercutting It seems that we have increased the specificity. You could resolve the issue by doing the same.

'&$selected, &$selected:hover'

[JanPretzel]

@petercutting It seems that we have increased the specificity. You could resolve the issue by doing the same.

'&$selected, &$selected:hover'

@oliviertassinari sorry to dig this up, but shouldn't this also work by setting theme.overrides.MuiTableRow.selected like so:

MuiTableRow: {
    selected: {  backgroundColor: '#f09628' }
},

I am asking, because this seems to not work, but since you suggested another solution I am not sure if this is a bug or not.

[oliviertassinari]

@JanPretzel This solution shouldn't work. You should get a warning in the console with the correct approach. It asks to increase the specificity with a .Mui-selected selector.

[JanPretzel]

@oliviertassinari As far as I can tell, there is no such warning. I created a codesandbox

[oliviertassinari]

Oh but you are using v5, see the latest breaking changes, the theme has a different structure.

[JanPretzel]

I don't think I was using v5, at least i forked from the v4.11 documentation. I changed the sandbox version to 4.11.0 (explicitly) instead of latest which should have been the same anyway, right? Still no warning.

[oliviertassinari]

with v4:

const themeInstance = createMuiTheme({
  overrides: {
    MuiTableRow: {
      root: {
        '&.Mui-selected': {
          backgroundColor: "#f09628"
        }
      }
    }
  }
});

with v5:

const themeInstance = createMuiTheme({
  components: {
    MuiTableRow: {
      styleOverrides: {
        root: {
          '&.Mui-selected': {
            backgroundColor: "#f09628"
          }
        }
      }
    }
  }
});

[JanPretzel]

Thank you for clarifying, but I think we talked past each other (I know this is working). I just wasn't sure if the selected approach should work.

MuiTableRow: {
    selected: {  backgroundColor: '#f09628' }
},

And after that

@JanPretzel This solution shouldn't work. You should get a warning in the console with the correct approach. It asks to increase the specificity with a .Mui-selected selector.

I wanted to make sure that you know that there seems to be no such warning. Sorry for all the confusion.

[oliviertassinari]

We are good :)

[nfantone]

Sorry for reviving the thread, but I'm facing a similar issue here. The above suggestion actually worked for overriding the backgroundColor on all TableRow using the theme, but I'm having a hard time overriding the color for a single TableRow instance.

My intuition tells me this should do the trick, but doesn't.

const useStyles = makeStyles(theme => ({
  selectedTableRow: {
    '&$selected, &$selected:hover' {
      backgroundColor: fade(deepPurple[500], theme.palette.action.selectedOpacity)
     }
  }
}));

function MyTableRow(props) {
  return <TableRow selected classes={{ root: classes.selectedTableRow }} {...props}>/* ... */</TableRow>
}

[oliviertassinari]

$selected style rule is missing

[nfantone]

🤔 Isn't that already defined by TableRow itself?

[oliviertassinari]

No, style sheets are isolated.

[Dezainer]

Guys, this did the trick for me:

````javascript
const StyledTableRow = withStyles(theme => ({
root: {
'&.Mui-selected, &.Mui-selected:hover': {
backgroundColor: theme.palette.action.hover
}
},
}))(TableRow)