英文:
Disable hover effect on MUI DataGrid
问题
I'm struggling on small detail that would be to disable the hover effect of a MUI Datagrid row.
我在解决一个小问题，即禁用 MUI Datagrid 行的悬停效果。
I can't find an easy way to do it, and reading the API documentation didn't help me.
我找不到简单的方法来实现它，并且阅读 API 文档没有帮助我。
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",
},
}}
/>
英文:
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",
},
}}
/>
答案1
得分: 2
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
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论