css - 日期选择器输入日历是否仅向下和向右打开？

Question

在确定日历的位置时，日历（到目前为止）似乎没有考虑碰撞检测。例如 ：

在屏幕截图中，您可以看到日历离开屏幕。即使我禁用水平滚动 ( overflow-x: hidden;)，它仍然会呈现在屏幕外。

有没有解决这个问题的方法而不破坏样式？

Answer 1

react-day-picker 的DayPickerInput API现在有classNames，它允许您更改覆盖和覆盖包装器的类的名称。您基本上是在重命名它们，以便在您自己的CSS/LESS文件中，您可以使用该名称来设置叠加层的样式并让它使用它而不是 react-day-picker-style.css 中的类（您不应该尝试更改为最佳实践）。

如果您想更改叠加层（日历弹出窗口）的默认道具，那么无论您在哪里创建组件，都可以执行以下操作：

createElement(DayPicker.Input,
    { //all other props 
        classNames: {
            overlay: "TheNewNameForTheClass", 
            overlayWrapper: "TheOtherNewNameForTheClass" 
        } 
    }
})

然后在您的样式文件中，您将使用TheNewNameForTheClass和TheOtherNewNameForTheClass为覆盖设置样式。