MUI Badge is not showing in the DOM, in inspector the span is in tact

Question

I've created a React RTK application with mainly MUI Components. Suddenly (and I can' reconstruct where when or why) the Mui <Badge> is not showing in my app, although it is in plain sight in the DevTools, elements.

The code that leads to this example page is:

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

I've tried a lot, but with no succes. Can anyone help me out what the problem is here?

Answer 1

you have not added color props to badge. thats why its not displaying. also I checked the badge API. there is no badgeValue props. but there is badgeContent props. 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>

Answer 2

I copied the code and it worked on my machine.
make sure to:

• npm install @mui/material @emotion/react @emotion/styled

• npm install @mui/icons-material @mui/material @emotion/styled @emotion/react

The order doesn't matter just install both.