如何在 ReactJS 中将 MUI 徽章放置在 IconButton 边框中？

Question

我使用工具提示和徽章制作了蓝牙连接状态指示器。然而，我正在努力解决徽章的定位问题。

\n

这是我的代码：

\n

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

\n

看起来像这样：

\n

\n

但是，我希望将徽章放置在圆形 IconButton 的边缘。\n我尝试将徽章放置在 IconButton 周围，如下所示：

\n

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

\n

这确实使徽章更加向外并解决了问题。不幸的是它添加了一个不需要的正方形：

\n

\n

我尝试添加 css 属性，例如 padding、margin 和 transform:translate，但没有成功:(

\n

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

\n

Answer 1

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

\n

\n

必须将徽章组件与图标组件分开，然后我只是使用transform: \'translate(30px, -20px)\'

\n

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

\n

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

\n

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

\n