覆盖overflow: hidden样式

Question

是否可以重写表中的overflow: hidden样式？我想在每一行上有一个按钮，打开一个下拉列表。但是，下拉列表当前是隐藏的，因为它溢出了行。

在Chrome开发人员工具中，如果我手动删除overflow:hidden from .ReactVirtualized__Table__row和.ReactVirtualized__Table__rowColumn，我可以看到下拉列表。但是，我还没有找到使用javascript或css来实现这一点的方法。

到目前为止，我已经尝试过：

添加溢出:对ReactVirtualized类可见。我在原始的styles.css文件和单独包含的css文件中都尝试了这一点。

.ReactVirtualized__Grid{
    overflow: visible;
}
.ReactVirtualized__Table__Grid {
    overflow: visible;
}
.ReactVirtualized__Table__row {
    overflow: visible;
}
.ReactVirtualized__Table__rowColumn {
    overflow: visible;
}

向Reactvirtualized.Table添加rowStyle和Style道具：

<ReactVirtualized.AutoSizer>
  {({height, width}) => (
    <ReactVirtualized.Table
      width={width}
      height={height}
      headerHeight={35}
      rowHeight={(height - 35) / 5}
      rowCount={content.length}
      rowGetter={({index}) => content[index]}
      rowClassName="al-table-view__row"
      headerClassName="al-table-view__header"
      rowStyle={{overflowY: 'visible'}}
      style={{overflowY: 'visible'}}
    >
      {this.getColumns(width)}
    </ReactVirtualized.Table>
  )}
</ReactVirtualized.AutoSizer>

我已经能够添加我自己的类并设置它们的样式，但是我也不能覆盖那里的overflow样式。任何建议都将不胜感激。

Answer 1

修改overflow样式不是正确的答案。即使您溢出了一行，您的dropdown也不会溢出Table本身的边界，因此较低的行也会有同样的问题。

对于这类事情，我建议你去看看react-portal。门户将内容从z索引堆栈中提升出来(从而避免裁剪问题)，同时保持内容的可视位置(上/左)，允许其呈现在其父对象的裁剪矩形/框之外。它们非常适合List或Table中的下拉菜单。