使用 MUI 背景时防止背景项目接收焦点

Question

当使用 MUI 背景 打开（自定义，非 MUI）对话框时，我们会调暗屏幕，但“灰显”项目仍然处于活动状态，用户可以使用键盘访问它们。

在下图中，我从“显示背景”移动到按钮 2，然后移动到按钮 3...

有没有简单的方法来避免键盘访问后台？

代码（沙箱）：

import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

export default function SimpleBackdrop() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button onClick={handleToggle}>Show backdrop</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
      <Button>Button 4</Button>
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={open}
        onClick={handleClose}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

Answer 1

您可以将焦点捕获在覆盖层内， https://v5-0-6.mui.com/components/trap-focus/

 <Unstable_TrapFocus open>
                  <Backdrop
                    sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
                    open={open}
                    onClick={() => setOpen(false)}
                  >
                    <CircularProgress color="inherit" />
                  </Backdrop>
</Unstable_TrapFocus>