如何在 ReactJS 的 IconButton 边框中定位 MUI 徽章？

Question

我使用工具提示和徽章制作了蓝牙连接状态指示器。但是我正在为徽章的定位而苦苦挣扎。

这是我的代码：

<Tooltip className={classes.help} title={getBluetoothStatus()}>
  <IconButton onClick={props.onClick} size="large">
    <Badge badgeContent="✔" color="success" overlap="circular">
      <BluetoothIcon />
    </Badge>
  </IconButton>
</Tooltip>

看起来像这样：

但是，我希望徽章位于圆形 IconButton 的边缘。我试过像这样将徽章放在 IconButton 周围：

<Tooltip className={classes.help} title={getBluetoothStatus()}>
  <Badge badgeContent="✔" color="primary" overlap="circular">
    <IconButton onClick={props.onClick} size="large">
      <BluetoothIcon />
    </IconButton>
  </Badge>
</Tooltip>

这确实将徽章放得更靠外并解决了这个问题。不幸的是，它添加了一个不需要的方块：

我试过添加 css 属性，例如填充、边距和 transform:translate 无济于事:(

非常感谢任何想法或建议，谢谢！

Answer 1

设法让它看起来像预期的那样：

必须将 Badge 组件与 Icon 组件分开，然后我才用 transform: 'translate(30px, -20px)'

设置了徽章的样式

这是我使用的代码，以防有人需要它：

<Tooltip className={classes.help} title={getBluetoothStatus()}>
  <IconButton onClick={props.onClick} size="large" >
    <Badge badgeContent="✔" color="success" overlap="circular" style={{  transform: 'translate(30px, -20px)'}}>
    </Badge>
    <BluetoothIcon />
  </IconButton>
</Tooltip>

如果您找到更好的方法，请告诉我。

如何在 ReactJS 的 IconButton 边框中定位 MUI 徽章？

How to position MUI badge in IconButton border in ReactJS?

reactjs

material-ui