How to style the badge component?

Question

I want to make the Material ui badge work with style right:'inherit'

For this, I need to override the badge styles but these are not available at the root node. My classes for example are being applied to the parent spam and not the child badge span.

<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

You can add styles to the inner span using the classes attribute:

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

Where myBadge is defined in makeStyles:

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