Chip deleteIconStyle throws arrow

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]

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

[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