禁用选项卡上的工具提示 - Material Ui，React答案

【问题标题】：Tooltip on disabled Tab - Material Ui, React禁用选项卡上的工具提示 - Material Ui，React
【发布时间】：2021-12-30 00:58:14
【问题描述】：

我是 React 和 UI 的新手。

有人可以帮我纠正这个问题吗？

我在我的组件中使用 Material Ui 选项卡，但无法在其中一个禁用的选项卡上获得工具提示。（下面添加了代码 sn-p）

<Tooltip title={sample_title}>
       <span>
          <Tab
          disabled
          value={some_Random_title}
          classes={tabStyleOne}
          label={
          (
           <Typography variant="caption" align="center" classes={renditionHeader}>
           {some_random-text}
           </Typography>
          )
          }
         />
     </span>
</Tooltip>

按照 Material-UI Tabs Documentation for disabled Tabs 的要求，我将我的 Tab 封装在 Span 中

https://codesandbox.io/s/wc74r?file=/demo.js

请帮助我了解我在哪里做错了。以及如何在 Material UI 中的 disabled Tab 上实现 tooltip。

提前致谢。

【问题讨论】：

标签： javascript css reactjs material-ui tabs

【解决方案1】：

这是我不久前发现的，也是我目前正在使用的。

// outside the component
function CloneProps(props) {
  const { children, ...other } = props;
  return children(other);
}

// when you render the component
<Tabs value={selectedTab} textColor="inherit" indicatorColor="secondary">
  <Tab 
    component={NavLink} 
    to={`${url}/tab1`} 
    label="Tab 1" 
  />
  {/* Hack for tooltip on disabled tab */}
  <CloneProps>  
    { tabProps => (
      <Tooltip title={tabIsDisabled ? "Tooltip title" : ""} arrow>
        <div>
          <Tab 
            {...tabProps}
            component={NavLink} 
            to={`${url}/tab2`}
            label="Tab 2" 
            disabled={tabIsDisabled}
          />
        </div>
      </Tooltip>
    )}
  </CloneProps>
</Tabs>

毛罗

【讨论】：