React FontAwesome 图标不喜欢 Material-UI 工具提示

Posted 2023-02-21

【中文标题】React FontAwesome 图标不喜欢 Material-UI 工具提示

【英文标题】：React FontAwesome Icons don't like Material-UI Tooltips

【发布时间】：2021-10-21 09:36:05

【问题描述】：

考虑这段代码：

<div className="p-2">
  <Tooltip
    arrow
    title=(
      <div>
        <h6>
          Delete
          ' '
          tool.toolName
          ' '
          Tool
        </h6>
      </div>
    )
  >
    <DeleteButtonIcon
      id=`delete_$tool.toolId`
      onClick=() =>  setOpenModal(tool) 
      className="fa-2x"
    />
  </Tooltip>
</div>

export const DeleteButtonIcon = (
  className,
  id,
  onClick
:  className?, id?: string, onClick?(event: any): any ): JSX.Element => (
  <FaWhite2rem
    icon=faTrash
    className=className
    id=id
    onClick=onClick
    style= cursor: 'pointer' 
  />
)

工具提示适用于 Material-UI 图标，但它们不会显示在 FontAwesome 图标中。

我将继续调试这个，我想我会把它放在这里以防万一有人遇到这个。

如果我在任何人回答之前解决了问题，我会发布它。

【参考方案1】：

看起来可能的修复之一非常简单，您只需将其包装在一个 div 中。

<div className="p-2">
  <Tooltip
    arrow
    title=(
      <div>
        <h6>
          Delete
          ' '
          tool.toolName
          ' '
          Tool
        </h6>
      </div>
    )
  >
    <div>
      <DeleteButtonIcon
        id=`delete_$tool.toolId`
        onClick=() =>  setOpenModal(tool) 
        className="fa-2x"
      />
    </div>
  </Tooltip>
</div>

任何类型的父元素都可以。