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

Posted 2023-03-06

【中文标题】如何将叠加层添加到材质 UI 表格行？

【英文标题】：How to add overlay to material UI table row?

【发布时间】：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，它会移动到屏幕的左侧。有谁知道如何完成这项工作？

【参考方案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中，最后有一个零宽度列表的