有没有办法让 Material-UI 中的点徽章变大？答案

【问题标题】：Is there a way to make the dot badge in Material-UI bigger?有没有办法让 Material-UI 中的点徽章变大？
【发布时间】：2021-11-20 18:19:14
【问题描述】：

我有一个徽章组件需要用作指示器。我不需要徽章来显示任何值，所以我使用了点变体，但它真的很小。我想我可以用 CSS 修改它，但由于某种原因无法正常工作。有什么帮助或提示吗？

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>
  );
}

【问题讨论】：

标签： javascript reactjs oop web material-ui

【解决方案1】：

此className={{dot: classes.dot}} 将样式应用于dot wrapper 范围。要定位创建dot 的实际跨度，您可以定位MuiBadge-dot 类。

更新makeStyles

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

更新徽章组件。

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

codesandbox

【讨论】：

【解决方案2】：

如果您希望dot 变体与standard 变体一样大，请将badgeContent 设置为空字符串：

<Badge color="secondary" badgeContent="">
  <MailIcon />
</Badge>

但如果您想要自定义尺寸，则需要覆盖dot class name，如下所示：

import Badge, { badgeClasses } from "@mui/material/Badge";

<Badge
  color="secondary"
  variant="dot"
  sx={{
    [`& .${badgeClasses.dot}`]: {
      width: size,
      height: size,
      borderRadius: "50%"
    }
  }}
>

现场演示

【讨论】：