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={{ invisible: false }} 更改它。在您从Popover 包含的代码sn-p 中，如果BackdropProps 已在Popover 上指定，它将成为{...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>
  );
}