覆盖溢出：隐藏样式

Question

是否可以覆盖溢出：表格中的隐藏样式？我想在每一行上都有一个打开下拉列表的按钮。但是，下拉列表当前是隐藏的，因为它溢出了行。

在 Chrome 开发者工具中，如果我从 .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;
}

将 rowStyle 和 Style 属性添加到 Reactvirtualized.Table：

<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>

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

Answer 1

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

对于这类事情-我建议您查看react-portal。门户将内容从 z-index 堆栈中提升出来（因此避免了裁剪问题），同时保持它的视觉位置（顶部/左侧），允许它在其父级的裁剪矩形/框之外渲染。它们非常适合 List 或 Table 中的下拉菜单。