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

Question

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

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>

<

a href =“ https://codesandbox.io/s/basicmodal-material-material-material-demo-demo-demo-forked-nofkw5?fontsize = 14&hidenavigation = 14&hidenavigation=1 = dark“ rel =“ nofollow noreferrer”>