Пользовательский компонент цвета для значка не работает

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

В версии 4 (в настоящее время все еще в альфа-версии, но бета-версия планируется в ближайшие пару недель), вы можете использовать функции в стилях, которые используют реквизит.

Документация здесь: https://next.material -ui.com / css-in-js / basics / # adapting the the Higher Order-component-api

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