Material-ui Drawer组件通过state props控制开关时无法关闭问题

MUI 内置的 Drawer 组件默认支持两种触发关闭的交互：

• 点击抽屉外部的模态遮罩层
• 键盘按下 ESC 键
  这两种交互都会触发 Drawer 自带的 onClose 事件，但你当前的实现没有绑定该事件对应的状态更新逻辑，导致父组件的 cartOpen 状态始终为 true，所以抽屉无法正常关闭。

1. 修改 CartDrawer 组件定义 #

新增 onClose 回调属性，并绑定到 Drawer 的 onClose 配置上：

interface Props {
  cartOpen: boolean;
  // 新增关闭回调属性
  onClose: () => void;
}
const CartDrawer: React.FunctionComponent<Props> = ({ cartOpen, onClose }) => {
  const classes = useStyles();
  return (
    // 绑定onClose事件
    <Drawer anchor="right" open={cartOpen} onClose={onClose}>
      <div className={classes.cartDrawerDiv}>
        <div className={classes.cartTitle}>
          <List>
            <ListItem>
              <ShoppingCartIcon className={classes.icon} />
              <Typography
                style={{
                  fontFamily: "Montserrat, sans-serif",
                  fontSize: "15px",
                  fontWeight: 800,
                  marginLeft: "8px",
                }}
              >
                1 Item
              </Typography>
              {/* 可选：手动添加关闭按钮，满足主动点击关闭的需求 */}
              <IconButton edge="end" onClick={onClose} style={{marginLeft: 'auto'}}>
                <CloseIcon />
              </IconButton>
            </ListItem>
          </List>
        </div>
        <Divider />
      </div>
    </Drawer>
  );
};
export default CartDrawer;

2. 修改父组件调用逻辑 #

给 CartDrawer 传入关闭回调，同步更新父组件的 cartOpen 状态：

...
<Button
  color="secondary"
  size="large"
  variant="contained"
  className={classes.buyButton}
  style={{ fontWeight: 600 }}
  onClick={() => setCartOpen(true)}
>
  COMPRAR
</Button>
          </div>
        </div>
      </div>
{/* 传入onClose回调，触发时修改父组件状态 */}
<CartDrawer cartOpen={cartOpen} onClose={() => setCartOpen(false)} />

如果不需要点击遮罩/ESC关闭的交互，也可以给 Drawer 添加 disableEscapeKeyDown 和 hideBackdrop 属性强制禁用默认关闭逻辑，仅通过自定义按钮控制开关即可。

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