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

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",
  }
}));