如何使用折叠菜单作为Material-ui上的TransitionComponent？

Question

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

它不仅不起作用，而且还打破了锚点。

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

提前致谢。

Link to codesandbox

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