Disable hover effect on MUI DataGrid

Issue

I'm struggling on small detail that would be to disable the hover effect of a MUI Datagrid row.

I can't find an easy way to do it, and reading the API documentation didn't help me.

How would you do it ?

<DataGrid
            columns={COLUMNS}
            rows={dailyReportItems}
            pageSize={pageSize}
            autoHeight
            onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
            pageSizeOptions={[10]}
            rowsPerPageOptions={[10]}
            disableSelectionOnClick
            getRowId={(row) => row.date}
            components={{
                NoRowsOverlay: () => (
                    <Stack
                        height="100%"
                        alignItems="center"
                        justifyContent="center"
                    >
                        Aucun résultat
                    </Stack>
                ),
                NoResultsOverlay: () => (
                    <Stack
                        height="100%"
                        alignItems="center"
                        justifyContent="center"
                    >
                        Aucun résultat sur ces filtres
                    </Stack>
                ),
            }}
            sx={{
                ".MuiTablePagination-displayedRows, .MuiTablePagination-selectLabel":
                    {
                        marginTop: "1em",
                        marginBottom: "1em",
                    },
            }}
        />

Solution

The simplest thing to do would probably be to just add CSS to override the .MuiDataGrid-row:hover behavior.

For example:

<DataGrid
  ...
  sx={{

    ...

    "& .MuiDataGrid-row:hover": {
      backgroundColor: "inherit" // Or 'transparent' or whatever color you'd like
    }
  }}
/>

Working CodeSandbox: https://codesandbox.io/s/disable-mui-grid-hover-vqcy8x?file=/demo.tsx:386-552

Answered By - Steve G