(Как оформить календарь для выбора даты) Панель расширения материала скрывает верхнюю часть окна календаря выбора даты.

Question

Панель расширения материалов здесь: https://material -ui.com / demos / extension-panel / и указатель даты реакции здесь: https://www.npmjs.com/package/react-date-picker это компоненты, о которых идет речь.

Вопрос в том, что у меня есть панель расширения, которая расширена двумя полями выбора даты внутри. Когда пользователь открывает эти поля выбора даты, всплывающий календарь скрывается в верхней части панели расширения (проблема заключается в высоте панели). Он должен появляться перед всем, однако я не могу понять, как передать компоненту календаря z-индекс, который поместит его перед остальными компонентами.

До сих пор я пытался задать стиль панели расширения для {overflow: 'visible'}, но, к счастью, календарь все еще появляется за верхом панели расширения.

Ниже приведены стили и HTML-код для панели расширения. Было бы неплохо использовать метод изменения z-индекса календаря или другой подход к исправлению отображения.

 <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: {}
  })