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

Question

考虑这段代码：

<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 图标一起显示。

我将继续调试这个，我想我会把它放在这里以防万一有人运行进入这个。

如果我在有人回答之前找出解决方法，我会 post 它。

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

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

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

React FontAwesome Icons don't like Material-UI Tooltips

font-awesome

reactjs

material-ui