将鼠标悬停在 Material UI 表中的表行上时，如何在列单元格中显示编辑按钮？

Question

目前我的表视图如下： Mui 表该表有一个列名称“Action”，其中有一个编辑图标按钮。现在，我想仅当用户将鼠标悬停在表行上时才显示（可见性）编辑图标来编辑每一行。我尝试覆盖 Material Table 的 MUITable 主题，但以下代码不起作用。有谁能够帮助我？

const getMuiTheme = () => createMuiTheme({
  overrides: {
    MUIDataTableBodyCell: {
      root: {
        '&:last-child': {
          visibility: 'hidden'
        }
      }
    },
    MuiTableRow: {
      root: {
        '&$hover:hover': {
          '& .MUIDataTableBodyCell-root': {
            '&:last-child': {
              visibility: 'visible'
            }

          }
        }

      }
    }
  }
});

Answer 1

我根据mods的评论修改了原来的答案：

我修改了ShinaBR2 答案，以便它仅显示当前行中的文本： https: //codesandbox.io/s/material-ui-table-onhover-action-zfloy ?file=/demo.js

这个想法是在鼠标输入（或鼠标悬停）时使用行 ID，并将其与当前行进行比较，当前行悬停以显示该行中的元素。

export default function SimpleTable() {
  const classes = useStyles();
  const [showActionId, setShowActionId] = useState(-1);

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              onMouseEnter={() => {
                setShowActionId(row.id);               // set id here
              }}
              onMouseLeave={() => setShowActionId(-1)}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">
                {row.id === showActionId ? "Show me" : ""}       // check the id here and display the message
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Answer 2

这是用于此目的的示例：https://codesandbox.io/s/material-demo-hr3te ?file=/demo.js 。

基本上我做了一些事情：

• 添加新状态来存储布尔变量以确定何时显示/隐藏组件。
• 添加onMouseEnter和onMouseLeave到TableRow组件，以获得悬停效果。
• 然后根据上面的hover事件设置state。

就是这样！