Material-ui: Chip deleteIconStyle throws arrow

[mnemanja]

I wanted to change the delete icon size, so I've tried applying the deleteIconStyle property.

   <Chip
          key={this.props.filterItem.key}
          onRequestDelete={() => this.props.handleFilterItemRequestDelete(this.props.filterItem.key)}
          onTouchTap={this.handleTouchTap(this.props.filterItem)}
          className={`filter-element ${this.state.showFilterItem ? 'opened-filter' : ''}`}
          backgroundColor="#fff"
          deleteIconStyle={{ width: 5, height: 5, fontSize: 5 }}
        >
          {this.props.filterItem.label}{this.assembleTheSelectedValues(this.state.selectedValues)}
   </Chip>

Throws Warning: Unknown prop 'deleteIconStyle' on <div> tag. Remove this prop from the element.

[oliviertassinari]

Fixed by #7407

[kimfucious]

I've tried everything I can think of but the following has no effect on changing the deleteIcon.
"@material-ui/core": "^3.0.2"

styles

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  chips: {
    display: "flex",
    flexWrap: "wrap"
  },
  chip: {
    margin: theme.spacing.unit / 4,
    fontSize: 12
  }
});

Chip

                  <Chip
                    key={value}
                    label={value}
                    className={classes.chip}
                    onDelete={this.handleDelete}
                    color="secondary"
                    deleteIconStyle={{ fontSize: 8, height: 8, width: 8 }}
                  />

error when rendering chip

Warning: React does not recognize thedeleteIconStyleprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasedeleteiconstyleinstead. If you accidentally passed it from a parent component, remove it from the DOM element.

[oliviertassinari]

@kimfucious It's a v0.x issue.

[kimfucious]

Thanks @oliviertassinari. I've been scouring the docs. I'm assuming your answer means that this should not be an issue with v3.0.2? I've tried swapping out to just deleteIcon, per the api docs here, but I get the same type of error.

Should I be targeting this using styles (e.g. withStyles) rather than inline, like my above?

[kimfucious]

HI @oliviertassinari , just a follow up on this, as it took me a while to wrap my head around how to do overrides.

I eventually was able to change the size of the deleteIcon by creating a styled version of Chip using withStyles:

const StyledChip = withStyles({
  root: {
    marginTop: 0,
    marginBottom: 0
  },
  deleteIcon: {
    height: 16,
    width: 16,
    fontSize: 16
  }
})(Chip);

I still don't fully get it, so if there are better ways to do this, I'd be appreciative of any feedback.

Thanks

[oliviertassinari]

@kimfucious Yes, your code snippet is exactly how I would have solved the problem. Well done 👍 .

[kimfucious]

Cool! Thanks for the positive feedback.