如何解决MUI Dialog点击外部关闭及跨文件按钮无法打开问题？

你的核心问题出在两处：

1. handleClose函数逻辑写反，导致Dialog原生的点击外部（backdrop）关闭功能失效，被迫使用ClickAwayListener但用法错误；
2. useEffect依赖为空数组，组件挂载后强制3秒关闭Dialog，且ClickAwayListener包裹范围错误，导致外部点击打开时立刻触发关闭。

1. 恢复Dialog原生点击外部关闭功能 #

MUI Dialog默认支持点击backdrop（外部区域）关闭，只需修正handleClose的逻辑：

const handleClose = (event, reason) => {
  // 允许点击外部、按ESC键关闭Dialog
  if (reason === 'backdropClick' || reason === 'escapeKeyDown') {
    setOpenSucess(false);
  }
};
// 若不需要区分关闭原因，直接简化为：
// const handleClose = () => setOpenSucess(false);

2. 修复自动关闭的定时器逻辑 #

让定时器仅在Dialog打开时启动，同时添加清理函数避免内存泄漏：

useEffect(() => {
  let timer;
  if (openSucess) {
    timer = setTimeout(() => {
      setOpenSucess(false);
    }, 3000);
  }
  // 组件卸载或Dialog关闭时清理定时器
  return () => clearTimeout(timer);
}, [openSucess]);

3. 正确使用ClickAwayListener（可选） #

如果需要点击Dialog内容区域外的任何地方（包括Dialog内部空白区）都关闭，需将ClickAwayListener包裹在Dialog内容内部，而非整个Dialog组件：

<Dialog
  open={openSucess}
  onClose={handleClose}
  {/* 其他Props保持不变 */}
>
  <ClickAwayListener onClickAway={handleClose}>
    <Box
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <CheckIcon
        style={{
          color: '#2bac3d',
          width: 60,
          height: 60,
          padding: 40,
        }}
      />
    </Box>
    <DialogTitle
      sx={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: '30px',
      }}
      id="alert-dialog-title"
    >
      <Typography variant="buttons.default">Saved successfully!</Typography>
    </DialogTitle>
  </ClickAwayListener>
</Dialog>

4. 支持外部组件控制Dialog打开 #

若需要从其他文件的按钮打开Dialog，需将open和onClose作为Props传入组件，放弃内部维护状态：

// 定义组件Props
interface StatusModalSuccessProps {
  open: boolean;
  onClose: () => void;
}

export const StatusModalSuccess = ({ open, onClose }: StatusModalSuccessProps): ReactElement => {
  useEffect(() => {
    let timer;
    if (open) {
      timer = setTimeout(() => {
        onClose();
      }, 3000);
    }
    return () => clearTimeout(timer);
  }, [open, onClose]);

  return (
    <Dialog
      open={open}
      onClose={onClose}
      {/* 其他Props保持不变 */}
    >
      {/* Dialog内容区域 */}
    </Dialog>
  );
};

外部组件调用示例：

import { useState } from 'react';
import { Button } from '@mui/material';
import { StatusModalSuccess } from './StatusModalSuccess';

const ParentComponent = () => {
  const [openSuccess, setOpenSuccess] = useState(false);

  return (
    <>
      <Button onClick={() => setOpenSuccess(true)}>
        Open dialog success
      </Button>
      <StatusModalSuccess 
        open={openSuccess} 
        onClose={() => setOpenSuccess(false)} 
      />
    </>
  );
};

export const StatusModalSuccess = (): ReactElement => {
  const [openSucess, setOpenSucess] = useState(false);

  const handleClose = () => {
    setOpenSucess(false);
  };

  useEffect(() => {
    let timer;
    if (openSucess) {
      timer = setTimeout(() => {
        setOpenSucess(false);
      }, 3000);
    }
    return () => clearTimeout(timer);
  }, [openSucess]);

  return (
    <Stack>
      <Button
        variant="outlined"
        sx={{
          backgroundColor: 'green',
          color: 'whitesmoke',
        }}
        onClick={() => setOpenSucess(true)}
      >
        Open dialog success
      </Button>
      <Dialog
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
        open={openSucess}
        PaperProps={{
          sx: {
            width: '100%',
            maxWidth: '500px!important',
            height: '100%',
            maxHeight: '250px!important',
          },
        }}
        onClose={handleClose}
      >
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <CheckIcon
            style={{
              color: '#2bac3d',
              width: 60,
              height: 60,
              padding: 40,
            }}
          />
        </Box>
        <DialogTitle
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            paddingTop: '30px',
          }}
          id="alert-dialog-title"
        >
          <Typography variant="buttons.default">Saved successfully!</Typography>
        </DialogTitle>
      </Dialog>
    </Stack>
  );
};

内容的提问来源于stack exchange，提问作者mariadev