Как сделать Material-ui Modal прокручиваемым

Вам повезет больше, если вы воспользуетесь компонентом Dialog. Modal - это конструкция нижнего уровня, которую использует Dialog. Вы можете найти примеры диалогов в разделе демонстрации компонентов.

Для модального стиля вам нужно использовать overflow = scroll.

Ниже приведен пример кода для получения модального интерфейса материала с прокруткой. withStyles используется для применения стиля к модальному в этом примере.

• Пример изображения материала с прокручиваемым пользовательским интерфейсом

• material-ui использование стилей

  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>
  

Я знаю, что на этот вопрос уже был дан ответ, но я нашел проверенный ответ неполным.

Для создания правильного модального окна вы, скорее всего, захотите, чтобы он имел максимальную высоту и был разделен на 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, который не увеличивает заголовок, и это то, что мы ищем

Надеюсь это поможет!

Для тех, кто ищет быстрый ответ на этот вопрос, вот решение, которое я нашел:

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

Итак, всего 2 простых шага ...

1. Сделать модальное переполнение прокручиваемым

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

2. Обновите стили для каждого прямого потомка модального окна. Вам необходимо добавить как минимум эти 2 атрибута:

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

Затем вы можете использовать css для изменения положения содержимого со свойствами top или left или настроить контейнер по своему усмотрению. Для решения этой проблемы не нужно переключаться на компонент Dialog.