Formik中的弹出日期选择器在外部div下被隐藏/切断。外部div具有formContainer类。

component.jsx

  render() {
    const { showForm,containerHeight } = this.state;
    return (
      <div
        classname={`${css.formContainer} ${showForm ? css.open : ''}`}
        ref={this.containerRef}
        style={{ minHeight: containerHeight }}
      >
        <div
          role="button"
          onClick={this.showForm}
        >
          <span classname={css.formTitle}>{trans('assign-learning')}</span>
          {
            !showForm
            && (
            <InteractionButton
              description={trans('add learning')}
              active={false}
              iconClass={css.addLearningIcon}
            />
            )
          }
        </div>
          <Formik
            initialValues={{
              content: [],linkedUsers: [],dueDate: '',notifyIndividuals: false,}}
            onSubmit={this.assignLearning}
            render={this.assignLearningForm}
           />
      </div>
    );
  }

styles.css

.formContainer {
  border: 1px solid var(--backgroundColourFaint);
  border-radius: 0.25rem;
  padding: 0 2rem;
  margin-bottom: 2rem;
  overflow: hidden;
  box-sizing: padding-box;
  background-color: var(--backgroundColourStrong);
  &:not(.open) {
    transition: min-height 0.5s ease-in-out;
    max-height: $unopenFormHeight;
    min-height: $unopenFormHeight;
  };
  &.open {
    transition: all 0.75s ease-in-out;
    max-height: 1000px;
  }
}

当我消除溢出时：隐藏；从.formContainer中，将立即显示该表单，即不依赖于“ showForm”功能。