为了搜索者登陆这个问题。如果您在使用ClickAwayListener时遇到问题并且没有使用variant='persistent'。试试这个：为ModalPropsonBackdropClick提供切换功能

<Drawer
  open={drawerIsOpen}
  ModalProps={{ onBackdropClick: this.toggleDrawer }}
>
  <MenuItem>drawer item 1</MenuItem>
</Drawer>

2021年7月更新：

我最近更新了material-ui/core到4.12.1版本，注意到onBackdropClick正在被弃用。相反，他们增加了对该功能的本地支持，当在抽屉外单击时，onClose函数将自动调用，现在它给出了reason的调用原因：
签名：function(event: object, reason: string) => void
event：回调的事件源。
reason：可以是：“escapeKeyDown”，“backdropClick”
参见此处的示例：https://material-ui.com/api/modal/向下滚动到onBackDropClicked -它对抽屉的作用与对
请改为执行以下操作：

<Drawer
  open={drawerIsOpen}
  onClose={{ (ev, reason) => this.setState({ drawerIsOpen: false }) }}
>
  <MenuItem>drawer item 1</MenuItem>
</Drawer>

您可以使用ClickAwayListener组件来完成此操作。
https://material-ui.com/api/click-away-listener/

import ClickAwayListener from '@material-ui/core/ClickAwayListener';

const drawer = (
      <ClickAwayListener onClickAway={this.handleDrawerClose}>
        <Drawer
          variant="persistent"
          anchor={anchor}
          open={open}
          classes={{
            paper: classes.drawerPaper
          }}
        >
          <div className={classes.drawerHeader}>
            <IconButton onClick={this.handleDrawerClose}>
              {theme.direction === "rtl" ? (
                <ChevronRightIcon />
              ) : (
                <ChevronLeftIcon />
              )}
            </IconButton>
          </div>
          <Divider />
          <List>a asdasd</List>
          <Divider />
          <List>asdasd</List>
        </Drawer>
      </ClickAwayListener>
    );

https://codesandbox.io/s/072ny1rjw

我花了一些时间训练来解决这个问题，但我发现了一个非常有用的解决方案，就是将变体更改为Temporary并使用de onEscapeKeyDown和onBackdropClick，如下所示：

<Drawer
    variant="temporary"
    onEscapeKeyDown={handleDrawerClose}
    onBackdropClick={handleDrawerClose}
    open={open}
    ...rest of your code...

MUI v5工作方案：

持久Drawer

使用ClickAwayListener可以知道用户何时在Drawer之外单击。您还需要设置mouseEvent="onMouseDown"，否则在用户单击打开按钮后会触发onClickAway回调，并使Drawer在打开之前立即关闭。

<ClickAwayListener
  mouseEvent="onMouseDown"
  touchEvent="onTouchStart"
  open={open}
  onClickAway={() => open && setOpen(false)}
>
  <Drawer variant="persistent" {...props} />
</ClickAwayListener>

临时Drawer

<Drawer
  variant="temporary"
  open={open}
  onClose={(_, reason) =>
    reason === 'backdropClick' && setOpen(false)
  }
>

现场演示

你可以通过在appFrame中添加一个div来实现它，它有一个onClick，可以像这样关闭抽屉：

<div className={classes.appFrame}>
{this.state.open ? 
    <div style={{ position: "fixed", zIndex: 1, left: 0, right: 0, top: 0, bottom: 0 }} 
        onClick={() => this.handleDrawerClose()} /> 
    : null
}
// rest of your code

我不确定它是否适用于1.0.0版本，但这种方法适用于我注意到，我使用的抽屉从“材料-ui/核心@4.10”

<Drawer ... open={this.state.open} onClose={() => this.handleDrawerClose()}>
....
</Drawer>

最近发现了这个整洁的useOnClickOutside hook => CodeSandBox，并用它替换了所有我的。比添加一个元素到dom要优雅得多，而且现在你可以向任何Material-ui组件传递ref属性，所以很容易使用Mui。

您可以在Drawer的open属性中使用useState，并在onClose属性中设置为false：
onClose={() => setOpen(false)}
在本例中，useState名称为open和setOpen