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中的下拉菜单。

覆盖溢出：隐藏的样式

1 个答案: