禁用 MUI DataGrid 上的悬停效果

huangapple go评论72阅读模式
英文:

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:

&lt;DataGrid
  ...
  sx={{

    ...

    &quot;&amp; .MuiDataGrid-row:hover&quot;: {
      backgroundColor: &quot;inherit&quot; // Or &#39;transparent&#39; or whatever color you&#39;d like
    }
  }}
/&gt;

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

huangapple
  • 本文由 发表于 2023年6月27日 17:30:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76563478.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定