我创建了一个 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 比较陌生,所以如果有更好的方法,我很乐意学习。
最佳答案
模态样式需要使用'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>
关于javascript - 如何使 material-ui Modal 可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53939246/