MUI Dialog点击关闭按钮无法关闭问题求助

嘿，我一眼就瞅到问题所在啦！这是事件冒泡搞的鬼～

你看，你的<ContentDialog />组件是嵌套在那个带有onClick={() => setOpen(true)}的<Box>里面的。当你点击关闭按钮的时候，点击事件会向上冒泡到父级的<Box>，触发它的点击事件——刚把open设为false，立刻又被设回true了，所以Dialog看起来就是关不掉。

给你几个解决办法，任选其一就行：

• 办法一：阻止关闭按钮的事件冒泡
  修改Dialog里的IconButton的onClick逻辑，加上事件阻止冒泡的代码：

  <IconButton 
    edge="start" 
    color="inherit" 
    onClick={(e) => {
      e.stopPropagation(); // 阻止事件向上冒泡
      setOpen(false);
    }} 
    aria-label="close"
  >
    <CloseIcon />
  </IconButton>
  

• 办法二：把Dialog移出父级点击Box
  在ContentCard组件里，把<ContentDialog />移到那个带有点击事件的<Box>外面，这样父级的点击事件就不会影响到Dialog的关闭按钮了：

  const ContentCard = ({ content }: IContentCardProps) => {
    const { user } = useUser();
    const [open, setOpen] = useState<boolean>(false);
  
    return (
      <>
        <Box
          p={2}
          height="300px"
          maxWidth="250px"
          display="flex"
          flexDirection="column"
          justifyContent="space-between"
          border={`1px solid ${blue.main}`}
          sx={{
            cursor: "pointer",
            ":hover": { boxShadow: `0px 0px 3px 1px ${blue.main}` },
          }}
          onClick={() => setOpen(true)}
        >
          {/* 原来的Typography、Box内容保持不变 */}
        </Box>
        <ContentDialog open={open} setOpen={setOpen} />
      </>
    );
  };
  

这两种方法都能解决你的问题，你可以试试哪个更符合你的代码结构～

备注：内容来源于stack exchange，提问作者Florie Anstett