显示箭头以在材质 UI 中弹出

Question

是否可以向材质 UI 弹出组件添加箭头？

谢谢，

Answer 1

我认为这就是你想要的（不使用 popper 组件）

• 1. 您将需要覆盖 Popover 子组件的背景颜色，即带有transparent颜色的纸张；
• 2. 使用 Box Component 的 psudo 元素创建箭头元素。

import * as React from "react";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";

export default function BasicPopover() {
  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 style={{ width: 400, height: 200, backgroundColor: "lightblue" }}>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>

      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        PaperProps={{
          style: {
            backgroundColor: "transparent",
            boxShadow: "none",
            borderRadius: 0
          }
        }}
      >
        <Box
          sx={{
            position: "relative",
            mt: "10px",
            "&::before": {
              backgroundColor: "white",
              content: '""',
              display: "block",
              position: "absolute",
              width: 12,
              height: 12,
              top: -6,
              transform: "rotate(45deg)",
              left: "calc(50% - 6px)"
            }
          }}
        />
        <Typography sx={{ p: 2, backgroundColor: "white" }}>
          The content of the Popover.
        </Typography>
      </Popover>
    </div>
  );
}

• 这是工作演示：带箭头的基本弹出框

Answer 2

如果您想使用 aPopper代替，那么下面的沙箱有一个组件，您应该能够直接复制到您的代码库（打字稿）中：RichTooltip. 该标准Tooltip不适合我们项目的丰富内容，并且不允许按钮、选择文本等。

https://codesandbox.io/s/popper-with-arrow-58jhe

Answer 3

如果你想要箭头指向打开弹出窗口的按钮，你可以将箭头的 html 放在那里。

<Button aria-describedby={id} variant="contained" color="primary" onClick={handleClick}>
    Open Popover <img src="//path-for-arrow-image" />
</Button>
<Popover {...propsOfPopover}> {children} </Popover>