Reactjs 在图标按钮中将材质UI svg图标一个接一个地添加到另一个中

我有一个要求，我必须显示一个带有圆圈的搜索图标⭕️ 盖满。我指的是一个圆圈，里面有一个搜索图标，当我交出鼠标时，必须显示一个工具提示

我可以使用带有svg图标的FlotingActionButton来实现这一点，但问题是我无法在上面放置工具提示

据我所知，另一种方法是使用带有svg图标的图标按钮。这有一个设置工具提示的选项。因此，我将其整合为如下所示

 import IconButton from ‘material-ui/IconButton’;
 import SearchIcon from ‘material-ui/svg-icons/action/search’;
 import Lens from ‘material-UI/svg-icons/image/lens’;

 <IconButton tooltip=“Click to Search”>
      <Lens color=“red”>
            <SearchIcon color=“white” />
      </Lens>
 </IconButton>

从“物料界面/IconButton”导入IconButton；
从“材料ui/svg图标/操作/搜索”导入搜索图标；
从“材质UI/svg图标/图像/镜头”导入镜头；

---

但这里的问题是，我只能看到圆圈，但搜索图标没有出现在镜头内。有什么建议我做错了什么？或者有没有其他方法可以通过工具提示实现？请建议

不可能将一个图标放置到另一个图标中，但您可以在

浮动操作按钮

上显示工具提示。有一个内部材质ui组件

工具提示

。它没有文档记录，但可以通过以下方式导入：

import Tooltip from "material-ui/internal/Tooltip";

创建此简单组件：

class TooltipHolder extends Component {
  constructor() {
    super();

    this.state = {
      isVisible: false
    };
  }

  render() {
    return (
      <div
        style={{ position: 'relative' }}
        onMouseEnter={() => this.setState({ isVisible: true })}
        onMouseLeave={() => this.setState({ isVisible: false })}
      >
        {this.props.children}

        <Tooltip
          label={this.props.label}
          show={this.state.isVisible}
          horizontalPosition="center"
          verticalPosition="top"
          touch={true}
        />
      </div>
    );
  }
}

---

检查您描述的情况。

您使用的是什么版本的材质ui？如果

0.xx

请检查我的答案。我使用的是v0.18谢谢米哈利。伟大的我觉得MaterialUI0.xx版本并没有单独的工具提示组件。我将测试您的代码并更新您。

<TooltipHolder label="tooltip text">
  <FloatingActionButton mini={true}>
    <SearchIcon />
  </FloatingActionButton>
</TooltipHolder>