如何在 ReactJS 中的 IconButton 附近 position 材质 UI 徽章？

Question

How can I solve the issue of positioning the badge content to be near the IconButton in Material UI?

I've tried to disableRipple but it doesn't work!

Ugly

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

How I want to appear

If I don't use IconButton everything is okay, but I need Icon Button!

Answer 1

Put the IconButton outside of the Badge

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

Result