时间戳

首页 > 解决方案 > 将鼠标悬停在 Material UI Table 中的表格行上时，如何在列单元格中显示编辑按钮？

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

问题描述

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

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

          }
        }

      }
    }
  }
});

标签： reactjsmaterial-ui

解决方案

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

基本上我会做一些事情：

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

而已！

推荐阅读