如何实现Material-UI DataGrid行可点击（带指针光标）且禁用选中高亮？

这个功能是可以实现的，通过自定义样式就能搞定，具体操作如下：

• 禁用单元格选中高亮：
  Material UI社区版DataGrid没有直接禁用单元格聚焦高亮的props，需要通过CSS覆盖默认样式。利用组件的sx属性，针对单元格的聚焦、激活状态去掉高亮效果，同时可按需覆盖选中单元格的背景色。

• 设置整行指针光标：
  同样通过sx属性，给表格行设置cursor: pointer，让整行在常态或hover时都显示指针光标。

完整代码示例 #

<DataGrid
  disableSelectionOnClick={true}
  onRowClick={p => console.log('row clicked', p)}
  sx={{
    // 为整行设置指针光标
    '& .MuiDataGrid-row': {
      cursor: 'pointer',
    },
    // 移除单元格聚焦、激活时的高亮边框
    '& .MuiDataGrid-cell:focus, & .MuiDataGrid-cell:active': {
      outline: 'none',
      boxShadow: 'none',
    },
    // 移除选中单元格的背景高亮（按需启用）
    '& .MuiDataGrid-cell:focus-within': {
      backgroundColor: 'transparent',
    }
  }}
/>

补充说明 #

disableSelectionOnClick仅用于禁用行的选中状态，但单元格点击时仍会触发聚焦高亮，因此需要通过CSS覆盖这些默认样式。上述sx配置会直接作用于DataGrid内部的行和单元格元素，完全满足你的需求。

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