如何在 Material-ui 上使用 Menu with Collapse 作为我的 TransitionComponent？

Question

我在 Material-UI 上使用 Collapse 组件作为我的 TransitionComponent 时遇到问题。

不但没有用，还断了锚

Fade 工作正常，不知道在哪里寻找答案。

提前致谢。

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import { Menu, MenuItem, Collapse, Fade, Typography } from "@material-ui/core";

function App() {
  const [open, toggle] = useState(false);
  const ref = useRef(null);

  return (
    <>
      <div style={{ position: "absolute", top: "50%" }} ref={ref}>
        <Typography variant="h4" className="App" onClick={() => toggle(true)}>
          Click me!
        </Typography>
      </div>
      <Menu
        TransitionComponent={Collapse}
        anchorEl={ref.current}
        open={open}
        onClose={() => toggle(false)}
      >
        <MenuItem>Item do menu</MenuItem>
      </Menu>
      <Menu
        TransitionComponent={Fade}
        transitionDuration={800}
        anchorEl={ref.current}
        open={open}
        onClose={() => toggle(false)}
      >
        <MenuItem>Item do menu</MenuItem>
      </Menu>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

这是 Collapse 转换结合 Popover 组件（由 Menu 使用）的已知错误：https://github.com/mui-org/material-ui/issues/11337

如何在 Material-ui 上使用 Menu with Collapse 作为我的 TransitionComponent？

How do I use Menu with Collapse as my TransitionComponent on Material-ui?

transition

menu

collapse

reactjs

material-ui