如何设置徽章组件的样式?
How to style the badge component?
我想让 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`
您可以使用 类 属性向内部跨度添加样式:
<Badge badgeContent={"11"} classes={{badge: classes.myBadge}}>
其中 myBadge
在 makeStyles 中定义:
const useStyles = makeStyles((theme) => ({
myBadge:{
right: "inherit",
}
}));
我想让 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`
您可以使用 类 属性向内部跨度添加样式:
<Badge badgeContent={"11"} classes={{badge: classes.myBadge}}>
其中 myBadge
在 makeStyles 中定义:
const useStyles = makeStyles((theme) => ({
myBadge:{
right: "inherit",
}
}));