React Material UI Tooltips Отключить анимацию

Question

Я использую компонент подсказки пользовательского интерфейса React Material в своем приложении React.

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

Я хочу отключить анимацию входа и выхода. Как я могу добиться этого в последней версии

Answer 1

Вы можете использовать TransitionComponent и TransitionProps для решения этой проблемы.

Использовать Fade Переходной компонент с 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

Просто отключите / смоделируйте переходный компонент. ie: автоматически отображать детей следующим образом:

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

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

Вот пример codesandbox