[data grid] How can I disable the data grid hover state?

[RyleySill93]

The problem in depth 🔍

How can I stop the hover styles from being applied to the DataGrid?
I'm using getRowClassName to set a custom background color for each of my rows so I can't just override the styling for the hover state to be a specific color.

Is there a way I can just disable any hover behavior entirely?

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: datagrid hover state
Order ID: 72462

[DanailH]

@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.

[RyleySill93]

@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:

Screen.Recording.2023-11-02.at.2.54.44.PM.mov

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.

[DanailH]

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.