javascript - 如何使 Material UI 模态和对话框可滚动？

Question

我有一个 mui 模态，其中要显示很多内容。当我打开模式时，顶部内容被 chop ，我无法向上滚动。我已经尝试将 {overflow:"scroll"} 属性添加到模态。但是，它不起作用。这是我目前使用的代码:

  <Modal
    open={viewCreateSegmentModal}
    onClose={() => handleCreateSegmentModal(false)}
    sx={{ 
    overflow:'scroll',
    height:'100%'}}
  >
    <div style={{overflow:"scroll"}}>
      <CreateSegmentModal
        modalControl={(value) => handleCreateSegmentModal(value)}
      />
      </div>
  </Modal>

对于如何解决这个问题有什么建议吗？

Answer 1

我在使用 Material UI 的模态组件时也遇到过这个问题。为了添加到其他人的评论中，我在下面做了这个，它起到了作用。注意:我还设置了一个 styles-in-js 以在窗口中央显示模式。使用带有 React 的 MUI 5.8.x。如下图:

...
import { Modal, Box, ... } from '@mui/material';
...


...
const formStyle = {
    // These 4 below are positionings I used for larger 
    // height viewports - centered
    position: 'absolute', 
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    // other styles...
    width: '52%',
    maxWidth: '600px',
    minWidth: '270px',
    boxShadow: 24,
    py: 4,
    borderRadius: 3,
    zIndex: 100,
    // media query @ the max height you want (my case is the 
    // height of the viewport before the cutoff phenomenon) - 
    // set the top to '0' and translate the previous 'y' 
    // positioning coordinate so the top of the modal is @ the 
    // top of the viewport
    '@media(max-height: 890px)': {
        top: '0',
        transform: 'translate(-50%, 0%)'
    }
};


const MyStubbornModal = () => {
  ...
  return (
    ...
      // set the modal overflowY to scroll
      <Modal sx={{overflowY: 'scroll'}} disableScrollLock={false} ... >
        // I have an inner div (MUI Box), designated as a 'form' 
        // that is assigned the style above
        <Box sx={formStyle} component="form" ... >
          ...
        </Box>
      </Modal>
    ...
  );
}

export default MyStubbornModal;