0
126
Vistas¿Hay alguna manera de hacer que la insignia de puntos en Material-UI sea más grande?
Tengo un componente de insignia que necesita funcionar como indicador. No necesito la insignia para mostrar ningún valor, así que utilicé la variante de puntos, pero es muy pequeña. Supongo que podría modificarlo con CSS pero no funciona por alguna razón. ¿Alguna ayuda o consejo?
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 Respuestas
Responde la pregunta0
Este className={{dot: classes.dot}} aplica estilos al intervalo del dot wrapper . Para apuntar al tramo real, que está creando el dot , puede apuntar a la clase MuiBadge-dot .
makeStyles actualizados
dot: { "& .MuiBadge-dot": { height: 20, minWidth: 20, borderRadius: 10 } }Componente de insignia actualizado.
<Badge className={{dot: classes.dot}} anchorOrigin={{ vertical:'top', horizontal:'right',}} variant="dot" color="primary" invisible={!hasNotes}> </Badge>
·
Juan Pablo Isaza
Denunciar
0
Si desea que la variante de dot sea tan grande como la variante standard , establezca badgeContent en una cadena vacía:
<Badge color="secondary" badgeContent=""> <MailIcon /> </Badge>Pero si desea un tamaño personalizado, debe anular el nombre de la clase de punto como se muestra a continuación:
import Badge, { badgeClasses } from "@mui/material/Badge"; <Badge color="secondary" variant="dot" sx={{ [`& .${badgeClasses.dot}`]: { width: size, height: size, borderRadius: "50%" } }} >Demo en vivo
·
Juan Pablo Isaza
Denunciar
Responde la pregunta