梅花章在DOM中没有显示，在巡查员中则是机智的。

Question

我创建了一个具有主要MUI组件的React应用程序。突然之间(我可以在什么时候或为什么重建)梅<Badge>在我的应用程序中没有显示出来，尽管它在DevTools中是显而易见的，元素。

​

​

导致此示例页的代码是：

import { Badge, Button } from "@mui/material";
import React from "react";

export default () => (
  <div>
    <Badge variant="dot" badgevalue={10}>
      <Button variant="outlined">test</Button>
    </Badge>
  </div>
);

我试了很多次，但没有成功。有人能帮我解决这里的问题吗？

Answer 1

您还没有在徽章中添加color道具。这就是为什么它不显示。我还查了警徽API。没有badgeValue道具。但也有badgeContent道具。https://mui.com/api/badge/

<div>
  <Badge variant="dot" badgevalue={10} color="primary">
    <Button variant="outlined">test</Button>
  </Badge>
  <Badge variant="dot" badgeContent={10} color="primary">
    <Button variant="outlined">test</Button>
  </Badge>
</div>