如何在 ReactJS 的 IconButton 附近定位 Material UI 徽章？

Question

如何解决 Material UI 中将徽章内容定位到 IconButton 附近的问题？

我试过禁用 Ripple，但没用！

丑

     <Badge badgeContent={4} color="primary">
          <IconButton
            disableFocusRipple
            disableRipple
            style={{ backgroundColor: "transparent" }}
          >
            <MailIcon />
          </IconButton>
        </Badge>

我想怎样出现

如果我不使用 IconButton 一切都好，但我需要 Icon Button！

Answer 1

将 IconButton 放在徽章外面

 <IconButton style={{ backgroundColor: "transparent" }}>
      <Badge badgeContent={4} color="primary">
           <MailIcon />
      </Badge>
   </IconButton>

结果

如何在 ReactJS 的 IconButton 附近定位 Material UI 徽章？

How to position Material UI badge near IconButton in ReactJS?

user-experience

reactjs

material-ui