如何使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

使用 Dialog 组件会带来更好的运气。Modal 是 Dialog 利用的低级结构。您可以在组件演示部分找到 Dialog 示例。

Answer 2

您需要使用“ overflow = scroll”作为模式样式。

以下是获取可滚动Material-UI模态的示例代码。在此示例中，withStyles用于为模式应用样式。

• material-ui可滚动的图像示例

• withstyles的material-ui用法

  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 3

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

为了制作合适的 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 4

从 v5 文档来看，您想使用 aDialog而不是Modal具有scroll=body|paperprop 的 a 。

overflow:auto而不是使用带有封闭的模态<div/>：

<Modal open={contentOpened} style={{ overflow: "auto" }}>
  <div>
    <MyModalContent />
  </div>
</Modal>

使用清洁剂<Dialog/>

<Dialog open={contentOpened} scroll="body">
  <MyModalContent />
</Dialog>

在此处阅读有关 MUI 滚动内容对话框的更多信息...