如何修复徽章的锚定标签？

Question

这是我的徽章代码：

         <Tab
            label={
              <Badge
                badgeContent={size}
                color="secondary"
                showZero
                className={classes.badge}
                anchorOrigin={{
                  vertical: "top",
                  horizontal: "right",
                }}
              >
                <Typography>Pending</Typography>
              </Badge>
            }
            {...a11yProps(0)}
          />

这是徽章的样式。但是，这也将移动排版

 badge: {
    marginLeft: "1rem",
  },

它可以显示，但是，徽章的锚定标签与文字或标签重叠。我该如何解决这个问题呢？

​

Answer 1

badge: {
    position: absolute;
    top: '8px';  //you can change according to your use
  },

否则

anchorOrigin={{
 vertical: "top",
 horizontal: "right",
 position: "absolute",
 top: "8px"
}}

如果不能工作，请在评论中告诉我