Custom color to Badge component not working

Question

I need to add a custom color to my Badge component and it does not seem to work.

I have tried these:

<Badge className="badge" badgeStyle={{backgroundColor: '#00AFD7'}} variant="dot" />

<Badge className="badge" color='#00AFD7' variant="dot" />

These do not work. How can I pass a custom color to my Badge component

Answer 1

You can leverage withStyles and use the badge css class to customize this.

Here's an example:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Badge from "@material-ui/core/Badge";
import MailIcon from "@material-ui/icons/Mail";

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit * 2
  },
  customBadge: {
    backgroundColor: "#00AFD7",
    color: "white"
  }
});

function SimpleBadge(props) {
  const { classes } = props;
  return (
    <div>
      <Badge
        classes={{ badge: classes.customBadge }}
        className={classes.margin}
        badgeContent={10}
      >
        <MailIcon />
      </Badge>
    </div>
  );
}

SimpleBadge.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleBadge);

In v4, you can use functions within the styles that leverage props.

Documentation here: https://material-ui.com/styles/basics/#adapting-the-higher-order-component-api

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit * 2
  },
  customBadge: {
    backgroundColor: props => props.color,
    color: "white"
  }
});

Answer 2

In MUI v5, you can use either the sx prop:

<Badge
  badgeContent={130}
  sx={{
    "& .MuiBadge-badge": {
      color: "lightgreen",
      backgroundColor: "green"
    }
  }}
>
  <MailIcon />
</Badge>

Or styled() function:

const StyledBadge = styled(Badge)({
  "& .MuiBadge-badge": {
    color: "red",
    backgroundColor: "pink"
  }
});