当 MUI 模式处于活动状态时启用滚动 React

Question

我有一个非常简单的组件，使用 MUI Modal

const Contact = ({ open, handleClose }) => {
  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
          <Box sx={contactModalStyle}>
            <div className='Contact'>
              <h2>contact today</h2>
            </div>
          </Box>
        </Fade>
      </Modal>
    </div>
  );
}

export default Contact;

当模式处于活动状态时，默认情况下禁用页面滚动，MUI 是否提供任何道具以在模式处于活动状态时启用页面滚动？假设页面具有在模式处于活动状态时继续垂直滚动所需的高度尺寸

Answer 1

您可以启用 disableScrollLock 模态

的道具

<Modal open={open} onClose={handleClose} disableScrollLock>
  // ...
</Modal>

演示

当 MUI 模式处于活动状态时启用滚动 React

enable scroll when MUI modal is active React

reactjs

material-ui