如何在只允许Modal内容滚动的同时固定Modal的页眉和页脚？

Question

我一直在使用Modal组件，我注意到Modal窗口中的长内容使整个模式主体滚动，而不仅仅是Modal内部的内容。

有什么方法可以使内容单独滚动，同时保持Modal组件的页眉和页脚固定？

我需要类似于Material-UI对话框组件的Paper滚动工作原理的东西。

检查button labeled scroll=Paper。

Answer 1

我相信没有官方的方法可以做到这一点，因为这很简单。

您需要定义Modal个可滚动子级，例如，用Card和overflow定义一个height。

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

Material-UI Dialog仅在幕后进行。

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>
  );
}

演示：