如何使material-ui Modal可滚动

Question

我创建了一个Modal 并在其中放置了一些文本来描述我的应用程序以及如何使用它，但是文本溢出了Modal，因此文本的顶部和底部不可见。我想让组件可滚动，这样我的文本就不会超出页面的末端。

// The styling for the modal
const styles = theme => ({
    paper: {
        position: 'absolute',
        width: theme.spacing.unit * 130,
        backgroundColor: theme.palette.background.paper,
        boxShadow: theme.shadows[5],
        padding: theme.spacing.unit * 4,
    },
});


function getModalStyle() {
    const top = 50
    const left = 50

    return {
        top: `${top}%`,
        left: `${left}%`,
        transform: `translate(-${top}%, -${left}%)`,
        overflow: "scroll"
    };
}
// The actual modal
<Modal
    aria-labelledby="simple-modal-title"
    aria-describedby="simple-modal-description"
    open={this.state.modalOpen}
    onClose={this.handleModalClose}
>
    <div style={getModalStyle()} className={classes.paper}>
        <MyLongTextComponent/>
    </div>
</Modal>

我希望它具有独立于其背后的实际页面的滚动功能。我在互联网上没有找到太多帮助，所以任何指针都会非常有帮助！此外，如果 Modal 是在这种情况下使用的错误组件，请告诉我。我对 React 和 material-ui 比较陌生，所以如果有更好的方法，我很想学习。

Answer 1

对于任何寻求快速答案的人，这是我找到的解决方案：

<Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="simple-modal-title"
                aria-describedby="simple-modal-description"
                style={{ overflow: 'scroll' }}
              >

       <div style={
       zIndex: 10,
       position: absolute,}>
{/*your content here*/}
       </div>

</Modal>

所以只有两个简单的步骤...

1. 使模态溢出可滚动

   <Modal
                style={{ overflow: 'scroll' }}
              >
   

2. 为模态框的每个直接子元素更新样式。您至少需要添加这两个属性：

   <div style={
   zIndex: 10,
   position: absolute,}>
   

然后您可以使用 css 通过 top 或 left 属性重新定位内容，或者根据需要自定义容器。 无需切换到Dialog组件即可解决。

Answer 2

我知道这个问题已经回答了，但我发现检查的回复不完整。

为了制作合适的 Modal，您很可能希望它具有最大高度并分为 3 个主要部分：

• 标题
• 内容
• 页脚（可选）

如果内容中有很长的元素列表（即表单），将overflow: 'scroll' 设置为modal 将导致两个主要问题：

• maxHeight 将仅应用于容器，而其余内容仍将在下面可见
• 当用户滚动时，标题也会滚动到视线之外

一个只涉及标题和内容的更接近生产的示例将是：

const styles = theme => ({
  modal:{
    position:'absolute',
    top:'10%',
    left:'10%',
    overflow:'hidden',
    height:'100%',
    maxHeight: 500,
    display:'block'
  },
  header: {
    padding: '12px 0',
    borderBottom: '1px solid darkgrey'
  },
  content: {
    padding: 12,
    overflow: 'scroll'
  }
});

const { classes } = this.props
<Modal open={this.state.open}>
  <div className={classes.modal}>
    <div className={classes.heading}>
      <h4>Your Title here</h4>
    </div>

    <div className={classes.content}>
      <Button size="small" color="primary" variant="contained" onClick={this.closeOrder}>
        Close
      </Button>

      {this.getPics()}
    </div>    
  </div>
</Modal>

除了格式更好之外，此解决方案还有两个主要区别，可以解决上述实际问题：

• Modal 有overflow: hidden，将所有内容隐藏在其框外
• 内容有 overflow: scroll，它不会使标题飞涨，这正是我们正在寻找的内容

希望这会有所帮助！

Answer 3

模态样式需要使用'overflow = scroll'。

以下是获取可滚动材质-ui 模式的示例代码。在本例中，withStyles 用于为 modal 应用样式。

• image example of material-ui scrollable

• material-ui usage of withstyles

  const styles = theme => ({
    modalStyle1:{
      position:'absolute',
      top:'10%',
      left:'10%',
      overflow:'scroll',
      height:'100%',
      display:'block'
    }
  });
  <Modal open={this.state.open4} className={this.props.classes.modalStyle1}>
    <div>
      <Button size="small" color="primary" variant="contained" onClick={this.closeOrder}>
        Close
      </Button>
      {this.getPics()}
    </div>
  </Modal>
  

Answer 4

使用 Dialog 组件会更好。 Modal 是 Dialog 利用的较低级别的构造。您可以在组件演示部分找到对话框示例。