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

Question

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

我尝试过这些

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

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

这些不起作用。如何将自定义颜色传递给我的徽章组件

Answer 1

您可以利用withStyles并使用badge css class对此进行自定义。

这是一个例子：

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（目前仍为Alpha版本，但计划在接下来的几周内提供Beta版本）中，您可以在利用道具的样式内使用函数。

此处的文档：https://next.material-ui.com/css-in-js/basics/#adapting-the-higher-order-component-api

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