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

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

您可以使用类属性向内部跨度添加样式：

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

其中 myBadge 在 makeStyles 中定义：

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

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

How to style the badge component?

reactjs

material-ui

badge