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

Question

总的来说，我对 React 和 UI 很陌生。

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

我在组件中使用 Material Ui 选项卡，但无法在禁用的选项卡之一上获得工具提示。（下面添加的代码片段）

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

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

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

提前致谢。

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>

毛罗