React Material UI 工具提示禁用动画

Question

我在我的 React 应用程序中使用 React Material UI 的工具提示组件。

import Tooltip from "@material-ui/core/Tooltip";
...
...
<Tooltip title="Add" arrow>
    <Button>Arrow</Button>
</Tooltip>
...
...

我想禁用进入和退出动画。我怎样才能在最新版本中实现这一目标

Answer 1

您可以使用TransitionComponent和TransitionProps来解决这个问题。

使用FadeTransition 组件timeout: 0作为过渡组件的属性：

import Tooltip from "@material-ui/core/Tooltip";
import Fade from "@material-ui/core/Fade";
...
<Tooltip
    title="Add"
    arrow
    TransitionComponent={Fade}
    TransitionProps={{ timeout: 0 }}
>
    <Button>Arrow</Button>
</Tooltip>

Answer 2

只需禁用/模拟过渡组件即可。即：自动渲染子项，如下所示：

const FakeTransitionComponent = ({ children }) => children;

<Tooltip
  title="tooltip title"
  TransitionComponent={FakeTransitionComponent}
  // or TransitionComponent={({ children}) => children}
>
  <h1>Hello CodeSandbox</h1>
</Tooltip>

这是一个codesandbox演示