我正在为禁用MUI数据网格行的悬停效果的小细节而苦苦挣扎.

我找不到一种简单的方法来做到这一点,阅读API文档对我也没有帮助.

你会怎么做?

<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",
                    },
            }}
        />

推荐答案

最简单的做法可能就是添加css来覆盖.MuiDataGrid-row:hover行为.

例如:

<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

Css相关问答推荐

React呈现多个css文件

创建始终为剪辑元素的300%高度并左对齐的圆形剪辑路径

为什么CSS flex似乎应用了两次内部元素的填充?

使用 Vuetify 的 sass 变量时出错

如何使shiny 的showNotification可滚动?

Django:Tailwind 样式不适用于具有小部件属性的模板变量

为什么align-content:start应用于单行项目?

使用CSS Grid是否可以跳过下一列?

我在 ins 标签中有一个 img 标签,更改 ins 格式覆盖图像的视图

flex 容器中的两个滚动块

为什么 flexbox 中的 在应用居中时不会调整大小?

有没有办法让它比它更敏感?

如何隐藏锚文本而不隐藏锚?

CSS:背景图像和填充

Bootstrap 3 Glyphicons CDN

:last-child 没有按预期工作?

我的 inline-block 元素没有正确排列

html元素(div)的全高,包括边框,填充和边距?

CSS背景图像不透明度?

谷歌的无图像按钮