0
127
ViewsIs there a way to make the dot badge in Material-UI bigger?
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>
);
}
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
If you want the dot variant to be as big as the standard variant, set the badgeContent to an empty string:
<Badge color="secondary" badgeContent="">
<MailIcon />
</Badge>
But if you want a custom size, you need to override the dot class name like below:
import Badge, { badgeClasses } from "@mui/material/Badge";
<Badge
color="secondary"
variant="dot"
sx={{
[`& .${badgeClasses.dot}`]: {
width: size,
height: size,
borderRadius: "50%"
}
}}
>
Live Demo
·
Juan Pablo Isaza
Report
Answer question