How do I change the default color for row hover?

I’m trying to change the default color for the row hover event. As I see it, the default seems to be,

.MuiTableRow-root.MuiTableRow-hover:hover {
  background-color: 'rgba(0, 0, 0, 0.07)';
}

How do I change it from the React component?

Many thanks!

[GBincaz]

If anyone read this, that’s how I did it :

       const tableTheme = createMuiTheme({
            overrides: {
                MuiTableRow: {
                    hover: {
                        "&:hover": {
                            backgroundColor: "rgba(33, 150, 243, 0.25) !important"
                        }
                    }
                }
            }
        });

        <ThemeProvider theme={tableTheme}>
             <MaterialTable 
                ... 
                onRowClick={(event, rowData) => {
                     console.log(rowData);
                }}
                ...
              />
         </ThemeProvider>

The onRowClick assignement enable hover in the grid, the theme override the style of the hover.

[OnkelTem]

I’m trying to change the default color for the row hover event. As I see it, the default seems to be,

.MuiTableRow-root.MuiTableRow-hover:hover {
  background-color: 'rgba(0, 0, 0, 0.07)';
}

How do I change it from the React component?

Many thanks!

I’m not quite sure why do all these people recommend patching the theme 😉

This is how I did it:

const useStyles = makeStyles(theme => ({
  table: {
    '& tbody>.MuiTableRow-root:hover': {
      background: 'red',
    }
  },
}));

function MyTable() {
  const classes = useStyles();
  return (
    <div className={classes.table}>
      <MaterialTable .../>
    </div>
  );
}

The thing is - passing className to the <MaterialTable> element wouldn’t help because it sort of screws up standard MaterialUI techniques a little.