Material UI 工具提示不显示在自定义组件上，尽管将 props 传播到该组件

Question

当鼠标悬停在组件上时，我很难使 Material UI 工具提示真正出现。据我所知，我正在做的是工具提示组件的最简单实现：我直接导入它（还没有自定义样式或其他任何东西），然后将它包裹在另一个组件周围，在顶层展开它的道具。

阅读文档应该这么简单，但它没有出现在悬停上，并且在 React DevTools 中我看到 anchorEl 属性未定义。

import Tooltip from '@material-ui/core/Tooltip';

const containerComponent = () => (
    <Tooltip text="Planner"><PlannerIcon /></Tooltip>
)

PlannerIcon.js

const PlannerIcon = (props) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  );

Answer 1

我相信你需要 title="Planner" 而不是 text="Planner".

<Tooltip title="Planner"><PlannerIcon /></Tooltip>

Answer 2

我知道这个问题可能很奇怪，但也许可以尝试将 svg 图标作为组件导入，因为 React 16.4（现在不确定）您可以将 svgs 作为组件导入。

import { ReactComponent as YourName} from './assets/yourfile.svg';

那么你可以简单地这样做：

const PlannerIcon = (props) => (
  <YourName {...props}/>
  );

让我知道您是否尝试过以及是否有帮助。

@编辑我在他们的文档中没有看到任何名为文本的道具，也许你的意思是标题？ Tooltip api

Answer 3

您的工具提示无法正常工作，因为 Material-UI 工具提示的子项必须能够包含引用。

以下可持有参考：

任何 Material-UI 组件
class 组件即 React.Component 或 React.PureComponent
DOM（或主机）组件，例如div 或按钮
React.forwardRef 组件
React.lazy 组件
React.memo 组件

PlannerIcon 不是以上任何一个，它是一个功能组件。我会建议两个解决问题的方法：

环绕 PlannerIcon 以 div 作为父元素（div 可以容纳一个 ref）：
```
<Tooltip text="Planner">
  <div>
   <PlannerIcon />
  </div>
</Tooltip>
```

将 PlannerIcon 转换为 class 组件：

class PlannerIcon extends React.Component {
  render(){
    return(
     <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
      {...props}
     >
       <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
       <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
       <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
     </Icon>
    )
  }
};

Answer 4

不需要 div 解决方法或将您的功能组件变成 class 组件。您可以改用 forwardRef，它也可以工作：

const PlannerIcon = React.forwardRef((props, ref) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
    ref={ref}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  ));

我不确定 Icon 组件是关于什么的，您可能需要将它变成一个 <svg> 标签。

如果有人在使用打字稿，语法有点混乱，第一种类型用于 ref，第二种用于 props（不要问我为什么）：

const PlannerIcon = React.forwardRef<SVGSVGElement | null, IPlannerIconProps>((props, ref) => {
    ...
});

Material UI 工具提示不显示在自定义组件上，尽管将 props 传播到该组件

Material UI tooltip doesn't display on custom component, despite spreading props to that component

tooltip

reactjs

material-ui