Material ui 对话框中的 react-date-picker 切断了 datepicker

Question

您好，我在 Material ui Dialog.Dialog 中安装了 Datepicker（基于 react-date-picker 包），效果很好，但是当我点击 datepicker 时，它会向下滚动停止并滚动显示。

这是我的Example 我如何用 css

克服这个问题

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

Answer 1

您将 react-date-picker 与 material-ui 的 <Dialog> 组件结合使用，问题是日期选择器在对话框的 DOM 中呈现, 所以它被挡在对话框的可见部分。

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

您可以使用 material-pickers 组件：

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.

中找到 material 日期选择器的所有选项

Answer 2

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

中使用第一个 child 进行修复

刚开始的时候才把位置应用到日历上child

.react-calendar {

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

}

如果您遇到问题，请先修改您的模式。这只发生在模态上。

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

Material ui 对话框中的 react-date-picker 切断了 datepicker

react-date-picker in Material ui Dialog Cuts off datepicker

css

dialog

material-ui