Как переписать классы пользовательского интерфейса материала с помощью параметров - PullRequest
Новая
       7

Как переписать классы пользовательского интерфейса материала с помощью параметров

0 голосов
/ 06 сентября 2018

Я хочу перезаписать цвет значка удаления микросхемы с помощью параметра из родительского элемента. Стили должны быть установлены динамически. Параметр содержит стили как объект. Обычно иконка удаления будет иметь стиль как здесь . Я не могу использовать атрибут стиля, чтобы добраться до значка удаления. Попытка ниже не работает. 

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

export const ChipsCustom = (styles) => {

  const ele = (data, classes) => {

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

1 Ответ

0 голосов
/ 06 сентября 2018

Вот рабочие коды и коробка, где классы передаются детям в качестве реквизита: 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);
...