Почему пользовательский компонент Button, использующий кнопку 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, я должен убедиться, что ребенок может держать ссылку, поэтому я завернул ее в функцию React.forwardRef и передал ref компоненту Material UI Button, который он возвращает, но всплывающая подсказка все еще не работает.

Есть идеи, что мне не хватает?

Answer 1

Я разобрался с решением, поэтому вместо того, чтобы закрывать вопрос, я оставлю то, что сделал. Поэтому я забыл распространить объект props на завернутую кнопку MUI, и, очевидно, подсказка передает что-то кнопке, что важно для работы при наведении. Вероятно, проблема заключается в реквизитах onMouseOver, onMouseLeave, onFocus, onBlur, onTouchStart и onTouchEnd.

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