如何将叠加层添加到材质 UI 表格行？答案

【问题标题】：How to add overlay to material UI table row?如何将叠加层添加到材质 UI 表格行？
【发布时间】：2020-11-01 02:30:32
【问题描述】：

我正在渲染这样的一行

`<TableRow
  key={row.name}
>
  <TableCell>{row.empId}</TableCell>
  <TableCell>{row.userId}</TableCell>
  <TableCell>{row.name}</TableCell>
  <TableCell>{row.hireDate}</TableCell>
  <TableCell>{row.terDate}</TableCell>
  <TableCell>{row.empType}</TableCell>
  <TableCell>
    <Typography variant="button" color={row.empStatus ? 'primary' : 'error'}>
      {row.empStatus ? 'Active' : 'Inactive'}
    </Typography>{' '}
  </TableCell>
  <TableCell align="right">
    <IconButton aria-label="view log" onClick={() => setOpen(true)}>
      <HistoryIcon fontSize="small" />
    </IconButton>
    <IconButton aria-label="edit">
      <EditIcon fontSize="small" />
    </IconButton>
  </TableCell>
  <div className="overley">
    <p>overlay text</p>
  </div>
</TableRow>`

叠加层具有类似 CSS

`.overley {
    position: absolute;
    background-color: gainsboro;
    opacity: 0.5;
    width: 100%;
  }
  .tableRow {
    position: relative;
  }`

我期待这样的事情 table

那么如何在不影响表格或行宽和对齐方式的情况下添加覆盖效果或任何显示在行上的 div。

上面的代码在最后添加了一列，如果我给 left : 0，它会移动到屏幕的左侧。有谁知道如何完成这项工作？

【问题讨论】：

标签： javascript css reactjs html-table material-ui

【解决方案1】：

我也想这样做，并且能够通过或多或少地执行以下操作来做到这一点：

<TableRow className={'row-overlay-hover'}>
    <TableCell/>
    ...
    <TableCell/>
    <TableCell>
        <div className={'overlay-wrapper'}>
            <div className={'overlay-content'}>
                Overlay content
            </div>
        </div>
    </TableCell>
</TableRow>

.row-overlay-hover td:last-child {
    width: 0;
    padding: 0 !important;
}
.row-overlay-hover:hover .overlay-content {
    visibility: visible;
}
.overlay-wrapper {
    position: relative;
}
.overlay-content {
    visibility: hidden;
    position: absolute;
    right: 0;
}

注意：

我引用了这个Overlay table cells with two buttons on hover，它的回答指出，并非所有浏览器都支持表格单元格上的position: relative（尽管它是从2012年开始的）所以我选择将我的叠加层包装在一个div中，最后有一个零宽度列表的

【讨论】：