仅在 Material-UI v5 数据网格中的行悬停时显示操作

Question

我正在使用 MUIv4 并构建了下表组件，其中显示了悬停时的一些操作。

悬停之前的 UI

悬停后的 UI

现在我想转向 MUI v5 Datagrid 来替换这个组件。但找不到任何可以满足我的设计需求的东西，即在悬停时显示操作。有什么方法可以在 Datagrid 组件上执行此操作吗？

MUI5 DataGrid 的链接与某种期望的结果

注意：我想像 gmail 一样一次显示一行操作

Answer 1

只需给我代码：https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j ?file=/demo.js:699-864

您可以renderCell像Chip这样使用：

renderCell: (params) => {
                return (
                  <Chip variant="outlined" size="small" label={params.value} />
                );
              }

由于您需要一些类似 GMail 的界面，请尝试icon设置Chip. 参考： https: //github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js

它看起来像这样：