material-ui - 如何在 Popper 中使用背景阴影？

您可以使用Backdrop组件完成此操作。这是一个示例，使用Simple Popper 演示代码作为起点：

class SimplePopper extends React.Component {
  state = {
    anchorEl: null,
    open: false
  };

  handleClick = event => {
    const { currentTarget } = event;
    this.setState(state => ({
      anchorEl: currentTarget,
      open: !state.open
    }));
  };

  render() {
    const { classes } = this.props;
    const { anchorEl, open } = this.state;
    const id = open ? "simple-popper" : null;

    return (
      <React.Fragment>
        <Backdrop open={open} onClick={() => this.setState({ open: false })} />
        <div>
          <Button
            aria-describedby={id}
            variant="contained"
            onClick={this.handleClick}
          >
            Toggle Popper
          </Button>
          <Popper id={id} open={open} anchorEl={anchorEl} transition>
            {({ TransitionProps }) => (
              <Fade {...TransitionProps} timeout={350}>
                <Paper>
                  <Typography className={classes.typography}>
                    The content of the Popper.
                  </Typography>
                </Paper>
              </Fade>
            )}
          </Popper>
        </div>
      </React.Fragment>
    );
  }
}

请注意这里的关键补充：

<Backdrop open={open} onClick={() => this.setState({ open: false })} />

由于Backdrop组件使用与组件相同的open状态作为其open道具Popper，因此只要弹出器打开，它就会出现。

该onClick道具允许用户通过单击背景上的任意位置来关闭弹出器和背景。如果您不想要此功能，则可以排除该道具：

<Backdrop open={open} />

这是一个工作示例：https ://codesandbox.io/s/q76pn8pk9?fontsize=14

material-ui - 如何在 Popper 中使用背景阴影？

问题描述

解决方案

推荐阅读