[data grid] How can I disable the data grid hover state? about mui-x HOT 3 OPEN

@RyleySill93 have you checked the examples here https://mui.com/x/react-data-grid/style/#using-the-sx-prop? You can use the sx prop to control the styling on various parts of the grid.

from mui-x.

@DanailH Yup - the problem is I'm dynamically applying styles using the getRowClassName prop. So I can't just blanket override the Mui-hovered class with backgroundColor: #fff for example - I'm looking for Mui-hovered and MuiDataGrid-row:hover to have no effect.

The following almost works

    "&.MuiDataGrid-root .MuiDataGrid-row:hover": {
        backgroundColor: "inherit",
      },
      "&.MuiDataGrid-root .Mui-hovered": {
        backgroundColor: "inherit",
      },

But I get this behavior where the dynamically styled rows (getRowClassName is returning a class which styles the rows with a darker background color) are overridden:

This is the state when being hovered:

The effect I'm looking for is the styling of background-color: #f7f6f4 which is being applied by the MuiDataGrid-odd class isn't overridden by the hover state.

from mui-x.

From the sound of it, this looks like a specific styling case you have, not a bug with the data grid itself. If it is the background you want to overwrite you can always set it to transparent, not inherit. Also, I don't see what the problem is with overwriting the hover styles since you are already adding custom classes to the row via getRowClassName.

from mui-x.