Reactjs 如何防止 mui xdatepicker 被截断

https://codesandbox.io/s/react-mui-forked-fpt0xl?file=/index.js个

我正在try 创建一个简单的可拖动对话框，如上图所示.我遇到的问题是，由于某种原因，DatePicker元素的标签被切断了.我知道我可以自己设计样式来解决这个问题，但我想知道为什么MUI的默认样式会导致这种奇怪的行为.此组件的完整代码包含在下面，演示了上面的问题的工作示例.

    import * as React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
import { DesktopDatePicker } from '@mui/x-date-pickers';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { FormControl, InputLabel, Input, FormHelperText } from '@mui/material';
import DialogTitle from '@mui/material/DialogTitle';
import Paper, { PaperProps } from '@mui/material/Paper';
import Draggable from 'react-draggable';
import TextField from '@mui/material/TextField';
import { DateTime } from 'luxon';

function PaperComponent(props: PaperProps) {
  return (
    <Draggable
      handle="#draggable-dialog-title"
      cancel={'[class*="MuiDialogContent-root"]'}
    >
      <Paper {...props} />
    </Draggable>
  );
}

export default function DraggableDialog() {
  const [postDate, setPostDate] = React.useState<DateTime | null>(
    DateTime.now()
  );
  return (
    <Dialog
      open={true}
      onClose={() => {}}
      PaperComponent={PaperComponent}
      aria-labelledby="draggable-dialog-title"
    >
      <DialogTitle style={{ cursor: 'move' }} id="draggable-dialog-title">
        Add Story
      </DialogTitle>
      <DialogContent>
        <FormControl>
          <InputLabel htmlFor="story-title">Title</InputLabel>
          <Input id="story-title" aria-describedby="story-title-text" />
          <FormHelperText id="story-title-text">Enter title</FormHelperText>
        </FormControl>
        <LocalizationProvider dateAdapter={AdapterLuxon}>
          <DesktopDatePicker
            label="Date"
            renderInput={(props) => <TextField {...props} />}
            value={postDate}
            onChange={(newValue: DateTime | null) => {
              setPostDate(newValue);
            }}
          />
        </LocalizationProvider>
      </DialogContent>
      <DialogActions>
        <Button autoFocus onClick={() => {}}>
          Cancel
        </Button>
        <Button onClick={() => {}}>Add Story</Button>
      </DialogActions>
    </Dialog>
  );
}