徽章组件的自定义颜色不起作用

Question

我需要为我的徽章组件添加自定义颜色，但它似乎不起作用

我试过这些

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

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

这些都行不通。如何将自定义颜色传递给我的徽章组件

Answer 1

您可以利用withStyles和使用badge css 类来自定义它。

下面是一个例子：

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

在 v4 中，您可以在利用 props 的样式中使用函数。

此处的文档：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

在MUI v5中，您可以使用以下任sx一属性：

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

或者styled()函数：

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