Как сделать верхний и нижний колонтитул модального сообщения фиксированным, позволяя прокручивать только модальный контент?

Question

Я поиграл с модальным компонентом и заметил, что длинный контент в модальном окне делает прокрутку всего модального тела, а не только содержимое внутри модального.

Есть ли способ сделатьпрокрутка одного содержимого при сохранении фиксированного верхнего и нижнего колонтитула модального компонента?

Мне требуется нечто похожее на то, как работает прокрутка бумаги компонента Material-UI Dialog.

Проверьте кнопку , помеченную scroll=Paper.

Answer 1

Нет официального способа сделать это, я полагаю, потому что это довольно тривиально.

Вам необходимо определить прокручиваемый список Modal, например, Card с overflow и height.

<Card bordered={false} style={{ overflow: 'auto', height: '50vh' }}>

Material-UI Диалог делает это за сценой.

function FixedModal() {
  return (
    <Modal visible={true} title={'Title'} footer={'Footer'}>
      <Card bordered={false} style={{ overflow: 'auto', height: '50vh' }}>
        {[...new Array(50)]
          .map(
            () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
          )
          .join('\n')}
      </Card>
    </Modal>
  );
}

Демо: