Как сделать материал-интерфейс модальным прокручиваемым

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' для модального стиля.

Ниже приведен пример кода для получения модального прокручиваемого материала.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>
  

Answer 2

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