Question

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

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

export const ChipsCustom = (styles) => {

  const ele = (data, classes) => {

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

Answer 1

这是工作代码和框，其中将类作为道具传递给孩子： https://codesandbox.io/s/nr0r197zjm

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

如何通过参数覆盖Material UI类

1 个答案: