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

模态样式需要使用'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>