（如何为日期选择器的日历设置样式）“物料扩展面板”隐藏了日期选择器日历窗口的顶部

Question

此处的材料扩展面板：https://material-ui.com/demos/expansion-panels/ 以及此处的反应日期选择器：https://www.npmjs.com/package/react-date-picker 是有问题的组件。

问题是，我有一个扩展面板，其中带有2个日期选择器字段。当用户打开这些日期选择器字段时，弹出的日历在扩展面板的顶部被隐藏（面板的高度是问题）。它应该出现在所有内容的前面，但是我似乎无法弄清楚如何向日历组件提供z-index，该索引会将其放置在其余组件的前面。

到目前为止，我尝试为{overflow：'visible'}设置扩展面板的样式，但是日历仍然没有显示在扩展面板顶部的后面。

下面是扩展面板的样式和html。更改日历的z-index的方法或解决显示问题的另一种方法都很好。

 <ExpansionPanel
                  className={classes.expansionPanelExpanded}
                  >
                  <Grid container spacing={16}>
                    {this.renderChart()}
                    <Grid item xs={6} className={classes.grid}>
                      <FormControl
                            *a form component*
                      </FormControl>
                    </Grid>

                    <Grid item xs={6} className={classes.grid}>
                        <FormControl
                            * a form component
                        </FormControl>
                      )}
                    </Grid>

                    <Grid item xs={6} className={classes.datePicker}>
                      <div>
                        <InputLabel className={'date-label'}  htmlFor="name-disabled">Start Date *</InputLabel>
                      </div>
                      <FormControl
                        className={classes.formControl + ' ' + 'date-form'}
                        error={this.hasError('startDate')}
                        aria-describedby="startDate-error-text">
                        <DatePicker
                          name="StartDate"
                          clearIcon={null}
                          value={Moment(values.startDate, 'YYYY/MM/DD').toDate()}
                          onChange={(e) => {this.handleDateChange(e, 'start')}}
                          minDate={minDate}
                        />
                        {this.hasError('startDate') && (
                          <FormHelperText id="startDate-error-text">{errors.startDate}</FormHelperText>
                        )}
                      </FormControl>
                    </Grid>

                    <Grid item xs={6} className={classes.datePicker}>
                      <div>
                        <InputLabel className={'date-label'}  htmlFor="name-disabled">End Date *</InputLabel>
                      </div>
                      <FormControl
                        className={classes.formControl  + ' ' + 'date-form'}
                        error={this.hasError('endDate')}
                        aria-describedby="endDate-error-text">
                        <DatePicker
                          name="EndDate"
                          clearIcon={null}
                          value={Moment(values.endDate, 'YYYY/MM/DD').toDate()}
                          onChange={(e) => {this.handleDateChange(e, 'end')}}
                          minDate={Moment(values.startDate, 'YYYY/MM/DD').toDate()}
                          maxDate={maxDate}
                        />
                        {this.hasError('endDate') && <FormHelperText id="endDate-error-text">{errors.endDate}</FormHelperText>}
                      </FormControl>
                    </Grid>
                  </Grid>
                </ExpansionPanel>

CSS样式：

const materialStyles = (theme: Theme) =>
  createStyles({
    container: {
      overflow: 'visible'
    },
    group: {},
    formControl: {
      marginBottom: '20px'
    },
    dialog: {
      padding: '20px'
    },
    expansionPanelExpanded: {
      boxShadow: 'none',

    },
    gridChart: {
      marginBottom: '5px'
    },
    grid: {
    },
    datePicker: {
      marginTop: 10
    },
    radio: {
      zIndex: -1,
      root: {
        color: '#1a5336',
        '&$checked': {
          color: '#1a5336'
        }
      },
      checked: {}
    },
    submit: {}
  })