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

Question

我是React和UI的新手。有人可以帮我纠正一下吗？在我的组件中，我正在使用Material Ui Tabs，但无法在一个禁用的选项卡上获得工具提示。（下面添加了代码片段）

<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文档中对禁用选项卡的要求，将我的选项卡封装在Span中。

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

请帮助我理解我做错了什么，以及如何在Material UI中实现禁用选项卡上的工具提示。

提前感谢。

- Sameer Huilgolkar

Answer 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>

Mauro

- Mauro Nidola

---

很棒的解决方案！已经测试过与 MUI v4 兼容。 - Bogy