Reactjs 如何通过参数覆盖材质UI类

我想通过父级的参数覆盖芯片删除图标的颜色。样式需要动态设置。该参数将样式作为对象保存。通常情况下，删除图标将设置样式。我无法使用样式属性访问删除图标。下面的尝试无效

const styles = { deleteIcon: { color: 'white'}};

export const ChipsCustom = (styles) => {

  const ele = (data, classes) => {

    return (
      <Chip
        classes={{
          deleteIcon: classes.deleteIcon,
        }}
      />
    );
  };
  return withStyles(styles)(ele);
};

---

下面是工作代码沙盒，在这里，类作为道具传递给孩子们：

---

codesandbox实现有什么问题？@SakhiMansoor如何从组件外部更改颜色？e、 g.对于绿色，您的意思是父组件将颜色作为道具发送？你不想使用常量样式吗？是吗？@SakhiMansoor是的！我在下面给出了一个解释，你可以问进一步的问题

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Chip from "@material-ui/core/Chip";
import FaceIcon from "@material-ui/icons/Face";
import DoneIcon from "@material-ui/icons/Done";

const styles = theme => ({
  root: {
    display: "flex",
    justifyContent: "center",
    flexWrap: "wrap"
  },
  chip: {
    margin: theme.spacing.unit,
    color: "blue",
    "&:hover": {
      background: "#ff9814"
    }
  },
  deleteIcon: {
    color: "green"
  }
});

function handleDelete() {
  alert("You clicked the delete icon."); // eslint-disable-line no-alert
}

function handleClick() {
  alert("You clicked the Chip."); // eslint-disable-line no-alert
}

//Parent Component

function CustomChips(props) {
  const { classes } = props;
  return <MyChip classes={classes} />;
}

//Child Component

function MyChip(props) {
  const { classes } = props; //props are coming from parent

  console.log(classes);
  return (
    <div className={classes.root}>
      <Chip
        label="Deletable Chip"
        onDelete={handleDelete}
        classes={{
          root: classes.chip,
          deleteIcon: classes.deleteIcon
        }}
      />
    </div>
  );
}

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

export default withStyles(styles)(CustomChips);