Javascript 如何使材质ui模式可滚动

我已经创建了一个

模式

，并在其中放了一些描述我的应用程序以及如何使用它的文本，但是文本溢出了

模式

，因此文本的顶部和底部不可见。我想让这个组件可以滚动，这样我的文本就不会从页面的末尾跑出来

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

//模式的样式
常量样式=主题=>({
论文：{
位置：'绝对'，
宽度：theme.spacing.unit*130，
背景色：theme.palete.background.paper，
boxShadow:theme.shadows[5]，
填充：theme.space.unit*4，
},
});
函数getModalStyle（）{
常数top=50
常数左=50
返回{
top:`${top}%`，
左：`${left}%`，
transform:`translate（${top}%，-${left}%）`，
溢出：“滚动”
};
}
//实际模态

---

我想这是有滚动功能，它的背后的实际页面独立。我在网上没有找到太多的帮助，所以任何提示都会非常有用！此外，如果在这种情况下使用的

模态

组件不正确，请告知我。我对React和material ui还不太熟悉，所以如果有更好的方法，我很想学习如何使用。

您使用Dialog组件的运气会更好。模态是Dialog利用的较低级别构造。您可以在组件演示部分找到对话框示例。

您需要使用“溢出=滚动”作为模式样式

下面是获取可滚动材质ui模式的示例代码。在本例中，使用withStyles为modal应用样式

• constyles=theme=>({
  modalStyle1：{
  位置：'绝对'，
  排名前：'10%'，
  左：10%，
  溢出：'scroll'，
  高度：'100%'，
  显示：'block'
  }
  });
  接近
  {this.getPics（）}
  

---

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

为了制作合适的模型，您很可能希望它具有最大高度，并分为3个主要部分：

• 标题
• 内容
• 页脚（可选）

如果内容（即表单）中有一长串元素，将

溢出：“滚动”

设置为

模式将导致两个主要问题：


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>

constyles=theme=>({
模态：{
位置：'绝对'，
排名前：'10%'，
左：10%，
溢出：'隐藏'，
高度：'100%'，
最大高度：500，
显示：'block'
},
标题：{
填充：“12px 0”，
borderBottom:“1px实心暗灰色”
},
内容：{
填充：12，
溢出：“滚动”
}
});
const{classes}=this.props
你的头衔在这里
接近
{this.getPics（）}

除了更好地格式化之外，此解决方案还有两个主要区别，它们解决了上述实际问题：


Modal有
溢出：隐藏
，将所有内容隐藏在其框外
内容有
溢出：滚动
，这不会使标题飞涨，这正是我们要寻找的


希望这有帮助
 对于任何想快速找到答案的人，我找到了以下解决方案：

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




更新模态的每个直接子级的样式。您至少需要添加以下两个属性：

<div style={
zIndex: 10,
position: absolute,}>




然后，您可以使用css使用
top
或
left
属性重新定位内容，或者根据需要自定义容器无需切换到对话框组件即可解决此问题。
如果您能创建这么多stackblitz降级，效果会更好！这让我走上了解决问题的正确道路。@JahzielVillasana很高兴这让您找到了解决方案，但仅供参考，我现在更新了，以明确这通常是您想要的模式对话框的起点，而不是模式对话框，这样您就不会重新发明解决方案（对于具有可滚动内容之类的内容）这些问题已通过Dialog解决。谢谢！我从Background开始，真的很难让它发挥作用。我不知道我要找的是对话。
<div style={
zIndex: 10,
position: absolute,}>