我在我的 React 应用程序中使用了 React Material UI 的工具提示组件。
import Tooltip from "@material-ui/core/Tooltip";
...
...
<Tooltip title="Add" arrow>
<Button>Arrow</Button>
</Tooltip>
...
...
我想禁用进入和退出动画。我怎样才能在最新版本中实现这一点
React Material UI 工具提示禁用动画
IT技术
reactjs
material-ui
2021-05-05 00:57:13
4个回答
您可以使用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>
只需禁用/模拟过渡组件。即：像这样自动渲染孩子：
const FakeTransitionComponent = ({ children }) => children;
<Tooltip
title="tooltip title"
TransitionComponent={FakeTransitionComponent}
// or TransitionComponent={({ children}) => children}
>
<h1>Hello CodeSandbox</h1>
</Tooltip>
这是一个代码沙盒演示
我用过 Incepter 的解决方案，很干净。如果有人在这里寻找 TypeScript 解决方案。
const FakeTransitionComponent = React.forwardRef<
HTMLDivElement,
TransitionProps & { children?: React.ReactElement<any, any> }
>(
(
{
appear,
onEnter,
onEntered,
onEntering,
onExit,
onExited,
onExiting,
...props
},
ref
) => {
props.in = undefined;
return <div {...props} ref={ref}></div>;
}
);
TransitionProps 不会传递给包装器元素，因为它们都会导致 React 警告。
您可以将 React.Fragment 作为 TransitionComponent 传递
<Tooltip
title="tooltip title"
TransitionComponent={React.Fragment}
>
<h1>Hello CodeSandbox</h1>
</Tooltip>