reactjs - Material-ui.为什么 Popover 设置 Modal 的背景不可见

Question

不明白为什么 Popover 默认设置背景不可见，并且无法更改它。

我是否错过了 Material Design 中的一些重要内容？或者我可以为其创建一个问题吗？

    <Modal
      container={container}
      open={open}
      ref={ref}
      BackdropProps={{ invisible: true }}
      className={clsx(classes.root, className)}
      {...other}
    >

https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Popover/Popover.js#L386

Answer 1

您可以使用BackdropProps={{无形:假}}更改它。在您从 Popover 包含的代码片段中，如果在 Popover 上指定了 BackdropProps ，它将成为 {... other} 并将胜过早期的 BackdropProps={{invisible: true }}。

这是一个基于演示之一的工作示例:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles((theme) => ({
  typography: {
    padding: theme.spacing(2)
  }
}));

export default function SimplePopover() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <Button
        aria-describedby={id}
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center"
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center"
        }}
        BackdropProps={{ invisible: false }}
      >
        <Typography className={classes.typography}>
          The content of the Popover.
        </Typography>
      </Popover>
    </div>
  );
}