Is there a way to make the dot badge in Material-UI bigger?-CodePudding

I have a badge component that needs to work as an indicator. I don't need the badge to display any values so I used the dot variant, but it is really small. I assume I could modify it with CSS but is not working for some reason. Any help or tips?

const useStyles = makeStyles((theme)=>({
  dot: {
    borderRadius: 4,
    height: 8,
    minWidth:8,
  }
}));
function NotesBadge({hasNotes}){
  const classes=useStyles();
  return(
    <Badge
      className={{dot: classes.dot}}
      anchorOrigin={{
        vertical:'top',
        horizontal:'right',}}
        variant="dot"
        color="primary"
        invisible={!hasNotes}>
    </Badge>
  );
}

CodePudding user response：

This className={{dot: classes.dot}} applies styles to the dot wrapper span. To target the actual span, which is creating the dot, you can target the MuiBadge-dot class.

Updated makeStyles

dot: {
"& .MuiBadge-dot": {
    height: 20,
    minWidth: 20,
    borderRadius: 10
  }
}

Updated Badge component.

<Badge
  className={{dot: classes.dot}}
  anchorOrigin={{
  vertical:'top',
  horizontal:'right',}}
  variant="dot"
  color="primary"
  invisible={!hasNotes}>
</Badge>