当grand-parent有溢出时显示日期时间选择器：隐藏

Question

让我们从一个例子开始： https://codesandbox.io/s/ym96l09x3j

如您所见，最后一列是渲染DateTime组件。但是，单击输入不会显示日期选择器。

那是因为.ReactTable .rt-td类有一个＆＃34;溢出：隐藏＆＃34;风格适用于它。

我已经搜索了一些解决方案并找到了这个：CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container

他们基本上说如果祖父母有＆＃34;溢出：隐藏＆＃34;，我们需要将孩子的位置设置为绝对。具有绝对位置的孙子（在我们的例子中是DatePicker）应该正确显示。

有没有人知道如何实现这个目标？

Answer 1

尝试将此添加到您的CSS：

.rdt.rdtOpen {
  position: absolute;
}

当一个单元格被聚焦时，RDT会添加类.rdtOpen，否则就会删除它，所以这应该可以解决问题。