为什么使用 MUI 按钮的自定义按钮组件在工具提示悬停时不起作用？

Question

我创建了一个自定义按钮，它包装了一个 MUI 按钮，以便选择默认道具等。下面是我创建的一个简化示例，但问题仍然存在。

下面是代码，这里是一个代码和框链接：https ://codesandbox.io/s/material-ui-button-forwardref-tooltip-hover-problem-entv2 ? file =/ Button.js

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref}>{props.children}</MuiButton>
));

<Tooltip title="I can hover" placement="top">
  <Button>Custom Button</Button>
</Tooltip>

根据https://material-ui.com/api/tooltip/#props上的 Tooltip 文档，我应该确保孩子可以持有 ref，所以我将它包装在React.forwardRef函数中并将其传递ref给 Material UIButton它正在返回的组件，但工具提示仍然不起作用。

任何想法我错过了什么？

Answer 1

我想出了解决方案，所以我不会结束这个问题，而是离开我所做的。所以我忘了将 props 对象传播到包裹的 MUI 按钮上，显然 Tooltip 正在将一些东西传递给 Button，这对于使悬停工作很重要。可能是onMouseOver, onMouseLeave, onFocus, onBlur, onTouchStart, 和onTouchEndprops 是问题所在。

const Button = React.forwardRef((props, ref) => (
  <MuiButton ref={ref} {...props}>
    {props.children}
  </MuiButton>
));