我使用工具提示和徽章制作了蓝牙连接状态指示器。然而,我正在努力解决徽章的定位问题。
\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>\nRun Code Online (Sandbox Code Playgroud)\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>\nRun Code Online (Sandbox Code Playgroud)\n这确实使徽章更加向外并解决了问题。不幸的是它添加了一个不需要的正方形:
\n\n我尝试添加 css 属性,例如 padding、margin 和 transform:translate,但没有成功:(
\n任何想法或建议都非常感谢,谢谢!
\n