如何禁用MUI DataGrid的行悬停效果？

MUI DataGrid的行悬停效果由内置CSS类控制，你可以通过覆盖对应样式来禁用它，以下是两种可行方法：

方法1：组件内通过sx属性直接修改 #

在你的DataGrid组件的sx属性中新增样式规则，保留原有配置的同时覆盖悬停效果：

<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",
    },
    // 新增：禁用行悬停效果
    ".MuiDataGrid-row:hover, .MuiDataGrid-row.Mui-hovered": {
      backgroundColor: "transparent !important",
      // 若存在其他悬停样式（如文字颜色、边框），可在此一并清除
      // color: "inherit !important"
    }
  }}
/>

方法2：全局CSS覆盖（适用于所有DataGrid实例） #

如果需要全局禁用所有DataGrid的行悬停效果，可在项目全局CSS文件中添加：

.MuiDataGrid-row:hover,
.MuiDataGrid-row.Mui-hovered {
  background-color: transparent !important;
}

说明 #

• 使用!important是为了覆盖MUI内置样式的优先级，确保自定义样式生效；
• 若你的DataGrid有自定义行背景色，将transparent替换为对应背景色即可（比如和默认行背景色保持一致）。

内容的提问来源于stack exchange，提问作者Enzo