Material ui Dialog中的react-date-picker 切断日期选择器答案

【问题标题】：react-date-picker in Material ui Dialog Cuts off datepickerMaterial ui Dialog中的react-date-picker 切断日期选择器
【发布时间】：2020-04-17 07:49:25
【问题描述】：

您好，我在 Material ui Dialog.Dialog 中有 Datepicker（基于 react-date-picker 包）工作正常，但是当我点击 datepicker 时，它会向下滚动并切断并滚动显示。

这是我的Example 我如何用 css 克服这个问题

溢出滚动无法解决问题，因为我有一个列表项

【问题讨论】：

真的很抱歉，请点击Ctrl+Shift+D或切换预览，可以根据需要编辑/复制

标签： css dialog material-ui

【解决方案1】：

您正在使用react-date-picker 与material-ui 的<Dialog> 组件结合使用，问题是日期选择器在对话框的DOM 内呈现，因此它被阻止到对话框的可见部分。

基于 react-date-picker 的 API，无法更改元素以呈现日期选择器框，因此一种选择是使用另一个日期选择器。

您可以使用材料选择器组件：

import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import { DatePicker } from "@material-ui/pickers";

<Dialog open={true} aria-labelledby="form-dialog-title">
  <DialogContent>
    <DialogContentText>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used
      in laying out print, graphic or web designs. The passage is
      attributed to an unknown typesetter in the 15th century
    </DialogContentText>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker />
    </MuiPickersUtilsProvider>
  </DialogContent>
  <DialogActions>
    <Button>ok</Button>
  </DialogActions>
</Dialog>

在这里查看：https://codesandbox.io/s/material-datepicker-inside-dialog-i6wts
您可以在API docs 中找到材料日期选择器的所有选项。

【讨论】：

我们已经将这个数据选择器完全用于项目，我们无法回滚为什么我发布了这个问题。我们是否需要通过给出位置来设置日期选择器的样式。还有其他方式吗？
您可以将 DatePicker 包装在另一个 Modal 中并改用此组件，但您需要自己管理 modal 的打开。重构代码并转移到另一个组件有多难？这应该很容易。
您好，我已通过将 Position fixed 和 top 添加到 datepicker 来解决问题。在检查第一个列表是否出现问题时，因此将 css 应用于第一个列表项，无论如何谢谢

【解决方案2】：

我已经解决了这个问题。请注意，这只适用于某些情况。因为在我的案例中，截止问题只发生在第一行。您可以在 CSS 中修复第一个孩子

我只在第一个孩子时将位置应用于日历

.react-calendar {

position: fixed !important;
top: calc(100% - 479px) !important;

}

如果您遇到问题，请先修改您的模态。这仅在使用模式时发生。

我只是 CSS 的初学者，所以这个是第一位的，它对我有用。谢谢@Dekel

【讨论】：