小编Jah*_*ana的帖子

我已经创建了一个，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的新手，因此，如果有更好的方法，我想学习如何使用。