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

对于模态样式，您需要使用“ overflow = scroll”。

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

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 2

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

为了制作合适的模态，您最有可能希望它具有最大高度并将其分为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

使用Dialog组件会更好。模态是Dialog利用的较低层次的构造。您可以在组件演示部分找到Dialog示例。

Answer 4

对于任何想快速回答这个问题的人，这是我找到的解决方案：

<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>

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

使模态溢出可滚动

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

为模态的每个直接子级更新样式。您至少需要添加这 2 个属性：
```
<div style={
zIndex: 10,
position: absolute,}>
```

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

如何使Material-UI Modal可滚动

4 个答案: