如何设置徽章组件的样式？

Question

我想让 Material ui 徽章与样式 right:'inherit' 一起使用

为此，我需要覆盖徽章样式，但这些在根节点上不可用。例如，我的课程被应用于父垃圾邮件而不是子徽章跨度。

<span class="MuiBadge-root makeStyles-listItemContentContainer-152"><div class="MuiPaper-root MuiPaper-elevation1 makeStyles-listItemContent-151 MuiPaper-rounded">
<span class="makeStyles-itemHeader-153">Switch to LED lights</span><span class="makeStyles-itemDescription-154">LED Bulbs last 3 times longer than CFL bulbs.
<button class="MuiButtonBase-root MuiButton-root makeStyles-readMore-155 MuiButton-text" tabindex="0" type="button">
<span class="MuiButton-label"> Read More </span></button>
</span></div><span class="MuiBadge-badge MuiBadge-colorPrimary">Insights</span></span>`enter code here`

Answer 1

您可以使用 classes 属性将样式添加到内部跨度：

<Badge badgeContent={"11"} classes={{badge: classes.myBadge}}>

myBadge 在 makeStyles 中定义：

const useStyles = makeStyles((theme) => ({
  myBadge:{
    right: "inherit",
  }
}));