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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.