Material UI Snackbar无法关闭问题求助

你的Snackbar无法关闭主要是几个逻辑错误导致的，逐个修正即可：

• 关闭状态写反了：handleSuccessClose里你把success设为true，这等于告诉组件“继续保持开启”，正确应该改成false才能关闭。
• 参数名和状态变量重名：函数的第二个参数叫subscribeSuccess，和你的状态对象同名，导致内部逻辑混乱，改成reason就清晰了。
• 点击外部被阻止关闭：当前代码里如果是点击外部（clickaway）就直接return，不执行关闭，这和你想要的效果完全相反，把这个判断删掉就行。
• 条件渲染没必要：{subscribeSuccess && ...}里的subscribeSuccess是对象，永远为真，不管success是true还是false都会渲染组件，改成{subscribeSuccess.success && ...}更严谨，只在需要显示时渲染。

修复后的完整代码：

const Footer = () => {
  const [snackbarState, setSnackbarState] = useState({
    open: false,
    Transition: Slide,
  });

  const [subscribeSuccess, setSubSuccessMsg] = useState({
    success: false,
    msg: "",
  });

  // 修正参数名，避免冲突
  const handleSuccessClose = (event, reason) => {
    // 移除clickaway的阻止逻辑，允许点击外部关闭
    setSubSuccessMsg({ success: false, msg: "" }); // 这里设为false才会关闭Snackbar
  };

  return (
    // 只在success为true时渲染Snackbar
    {subscribeSuccess.success && (
      <Snackbar
        position="static"
        TransitionComponent={snackbarState.Transition}
        anchorOrigin={{
          vertical: "top",
          horizontal: "center",
        }}
        open={subscribeSuccess.success}
        autoHideDuration={10000}
        onClose={handleSuccessClose}
        sx={{ width: { xs: "100%", sm: "100%", md: "100%", lg: "70%" } }}
      >
        <Alert
          onClose={handleSuccessClose}
          severity="success"
          sx={{
            width: '100%',
            '& .MuiAlert-message': { textAlign: "center", width: "inherit" }
          }}
        >
          {subscribeSuccess.msg}
        </Alert>
      </Snackbar>
    )}
  );
};

修复后这三个功能都会正常工作：

• 点击Snackbar的“X”按钮，触发关闭逻辑
• 点击外部区域，Snackbar自动关闭
• 10秒后自动隐藏

内容的提问来源于stack exchange，提问作者sultan.h