MUI ModalコンポーネントにあるdisableScrollLockプロパティ

業務の中で、MUIのDialogコンポーネントを使用してダイアログを作成した際に、背後のコンテンツのスクロールを制御したいという状況がありました。その際に、disableScrollLockプロパティという便利なものがあったので記録します

概要

• プロパティ名: disableScrollLock
• 型：boolean
• デフォルト:false

このプロパティは、Dialog や Modal コンポーネントに対して true または false の値を設定することで使用できる。

使用例

下記の例では、disableScrollLock プロパティを true に設定しています。これにより、ダイアログが開いている間でも、ページの背景をスクロールできるようになります。

import React from 'react';
import Dialog from '@material-ui/core/Dialog';

function MyDialogComponent(props) {
  return (
    <Dialog open={props.isOpen} onClose={props.handleClose} disableScrollLock={true}>
      {/* ダイアログの内容 */}
    </Dialog>
  );
}