Question

我一直在尝试创建一个可滚动的模态，并使用React-Select包含各种选择。但是，当您单击选择时，它超出了模态的大小，它将出现在模态边界内，并且要求用户向下滚动以查看其余的选择菜单。我希望它出现在模式的顶部/外部。

下面的简单示例。

const Modal = ({ options }) => (
  <Modal>
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit, form }) => (
        <form onSubmit={handleSubmit}>
          <Field name='name'>
            {({ input }) => (
              <Select
                {...input}
                name={input.name}
                onBlur={input.onBlur}
                onChange={input.onChange}
                options={options}
              />
            )}
          </Field>
        </form>
      )}
    />
  </Modal>
)

export const Modal = styled(ReactModal)` // imported from my custom modal
  overflow: scroll; // this allows you to scroll the modal, if I change this to visible then the Select will appear on top of the modal background but then you can no longer scroll the modal
`;

所以我知道来自父级的溢出是阻止选择的原因。我曾尝试在Select上覆盖它，但是用!important或其他方法无法解决该问题，并且z-index似乎没有影响。

我如何实现两种效果（在顶部选择，可滚动）？

在可滚动模式上方强制选择

0 个答案: