在材质 UI 中显示弹出框的箭头答案

【问题标题】：Displaying arrow to popover in material UI在材质 UI 中显示弹出框的箭头
【发布时间】：2020-03-02 11:22:12
【问题描述】：

是否可以在 Material UI popover 组件中添加箭头？

谢谢，

【问题讨论】：

提供有关您的代码的更多信息。
github.com/mui-org/material-ui/issues/18928 看到这个链接

标签： reactjs material-ui

【解决方案1】：

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

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

【讨论】：

你能让它与material-ui v5一起工作吗？谢谢

【解决方案2】：

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

1. 您需要用transparent color 覆盖 Popover 子组件（即纸张）的背景颜色；
1. 使用 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>
  );
}

这里是工作演示：basic Popover With Arrow

【讨论】：

非常感谢codeandbox演示！
很高兴它有帮助。

【解决方案3】：

如果您想要箭头指向打开弹出框的按钮，您可以将 html for arrow 放在那里。

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

【讨论】：