为何react-select会导致Material UI弹窗出现滚动？

我的Modal组件代码 #

<Dialog fullWidth={true} sx={{
    "& .MuiDialog-container": {
        "& .MuiPaper-root": {
            maxWidth: maxWidth
        },
    }
}} open={opened} onClose={handleClose} aria-labelledby="parent-modal-title" aria-describedby="parent-modal-description">
    <DialogContent id="modal-description">
        <div>
            {children}
        </div>
    </DialogContent>
</Dialog>

我的Select组件代码 #

<Select options={data} placeholder='Choose' value={value} onChange={(e) => { setValue(e) }} theme={(theme) => ({ ...theme, borderRadius: 4, spacing: { ...theme.spacing } })} />

解决方法 #

方法1：修改DialogContent的溢出属性 #

将DialogContent的overflow设为visible，允许react-select的下拉菜单超出容器范围，避免触发Dialog的滚动机制：

<DialogContent id="modal-description" sx={{ overflow: 'visible' }}>
    <div>
        {children}
    </div>
</DialogContent>

方法2：将react-select的下拉菜单挂载到Dialog内部 #

通过menuPortalTarget属性指定下拉菜单挂载到DialogContent元素内，避免下拉菜单影响Dialog的尺寸计算：

<Select
  options={data}
  placeholder='Choose'
  value={value}
  onChange={(e) => { setValue(e) }}
  theme={(theme) => ({ ...theme, borderRadius: 4, spacing: { ...theme.spacing } })}
  menuPortalTarget={document.getElementById('modal-description')}
  styles={{
    menuPortal: base => ({ ...base, zIndex: 9999 })
  }}
/>

方法3：调整Dialog容器的溢出设置 #

在Dialog的sx样式中给MuiPaper-root添加overflow: 'hidden'，强制容器不显示滚动条：

<Dialog 
  fullWidth={true} 
  sx={{
    "& .MuiDialog-container .MuiPaper-root": {
      maxWidth: maxWidth,
      overflow: 'hidden'
    },
  }} 
  open={opened} 
  onClose={handleClose} 
  aria-labelledby="parent-modal-title" 
  aria-describedby="parent-modal-description"
>

内容的提问来源于stack exchange，提问作者user10863293