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

Question

目前我的表格 View 如下: Mui Table该表有一个名为“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

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

基本上我做了一些事情:

• 添加新状态以存储 bool 变量以确定何时显示/隐藏组件。
• 在TableRow组件中添加onMouseEnter和onMouseLeave，实现悬停效果。
• 然后根据上面的悬停事件设置state。

就是这样!