Question

如何在其他表单组件的顶部显示反应日选择器输入字段的日历覆盖弹出窗口？日历被其他表单组件隐藏。我可以在某处设置某种z-index吗？

<DayPicker.Input
    name={this.id}
    placeholder="MM/DD/YYYY"
    format="M/D/YYYY"
    value={this.value}
    onDayChange={this.handleDayChange.bind(this)}
    dayPickerProps={datePickerProps}
/>

Answer 1

叠加层有DayPickerInput-Overlay类绝对定位：您可以向其添加z-index以使叠加层位于其他元素的顶部。

Answer 2

此外，您可以将 Portals 与自定义叠加组件（道具 - overlayComponent）一起使用，以在所有内容之上呈现它.但是它会导致定位组件出现问题，所以我推荐使用 material-ui 的 Popper 作为自定义叠加组件，因为它显示在屏幕上的空闲空间区域。请参阅代码和框示例。

示例：https://codesandbox.io/s/optimistic-glitter-c77gb?file=/src/DateRangePicker.js

React Day Picker日历叠加层弹出其他组件

2 个答案: