嗨，我在材質ui對話框中有了日期選擇器(基于反應日期選擇器包)。對話框工作完美，但當我點擊日期選擇器，它向下滾動，切斷和滾動顯示。

這是我的例子 我如何用css克服這個問題

溢出滾動無法解決這個問題，因為我有一個列表項

你正在使用反應日期選擇器結合材料用戶界面& lt對話框& gt組件，問題是日期選擇器是在對話框的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://code sandbox . io/s/material-date picker-inside-dialog-i6 wts 您可以在API文檔中找到物料日期選擇器的所有選項。

我已經解決了這個問題。注意這只在某些情況下有效。因為截止問題只發生在我的第一排。您可以在CSS中修復第一個孩子

我只在第一個孩子出生時將位置應用到日歷中

.react-calendar {

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

}

如果您有問題，請先修改您的模式。這僅發生在使用on modal時。

我只是一個CSS初學者，所以這是第一個，它為我工作。謝謝@Dekel

我也有這個問題，我的解決方法是在拾取器根上設置一個最大高度:

。多年度picker-root { max-height:200 px；}

這將使選擇器對話框保持在文本字段的上方，而不是下方，并防止其被其所在的模態截斷。