How to eliminate hover, active, focus gray color in Material UI Chip component

Question

I have Chips implemented in several colors (green, yellow, blue etc.) and by default MUI Chip comes with grey hover/active/focus CSS style. I need to eliminate this hover/active/focus grey background color in MUI Chip component. So once again I don't want to replace gray color with another color but to completely eliminate following CSS styles:

clickable: {
  // Remove grey highlight
  WebkitTapHighlightColor: theme.palette.common.transparent,
  cursor: 'pointer',
  '&:hover, &:focus': {
    backgroundColor: emphasize(backgroundColor, 0.08),
  },
  '&:active': {
    boxShadow: theme.shadows[1],
    backgroundColor: emphasize(backgroundColor, 0.12),
  },
},
deletable: {
  '&:focus': {
    backgroundColor: emphasize(backgroundColor, 0.08),
  },
},

In the end this can be done by overriding Chip component in all the colors needed, but there has to be a better way.

Answer 1

You can create a factory function that returns a component with the color of your choice and overrides the behavior highlighted in your question:

import React from 'react';
import { withStyles } from 'material-ui/styles';
import Chip from 'material-ui/Chip';
import { emphasize, fade } from 'material-ui/styles/colorManipulator';

const ChipFactory = (color = null, deleteIconColor = null) => {
  const styles = theme => {
    const backgroundColor = emphasize(color || theme.palette.background.default, 0.12);
    const deleteIconColor = fade(deleteIconColor || theme.palette.text.primary, 0.26);
    return {
      root: {
        color: theme.palette.getContrastText(backgroundColor),
        backgroundColor,
      },
      clickable: {
        cursor: 'pointer',
        '&:hover, &:focus': {
          backgroundColor: emphasize(backgroundColor, 0.08),
        },
        '&:active': {
          backgroundColor: emphasize(backgroundColor, 0.12),
        },
      },
      deletable: {
        '&:focus': {
          backgroundColor: emphasize(backgroundColor, 0.08),
        },
      },
      deleteIcon: {
        color: deleteIconColor,
        '&:hover': {
          color: fade(deleteIconColor, 0.4),
        },
      },
    };
  };

  const CustomChip = ({ classes, ...props }) =>
    <Chip classes={classes} {...props} />;

  return withStyles(styles)(CustomChip);
};

export default ChipFactory;

Rather than creating individual components for each color, you can generate a new variety on the fly by invoking this function:

// excerpt from Chips demo
render() {
  const { classes } = props;

  const GreenChip = ChipFactory('#0f0');
  const RedChip = ChipFactory('#f00');
  const BlueChip = ChipFactory('#00f');

  return (
    <div className={classes.row}>
      <GreenChip label="Basic Chip" className={classes.chip} />
      <RedChip
        avatar={<Avatar>MB</Avatar>}
        label="Clickable Chip"
        onClick={handleClick}
        className={classes.chip}
      />
      <BlueChip
        avatar={<Avatar src="/static/images/uxceo-128.jpg" />}
        label="Deletable Chip"
        onRequestDelete={handleRequestDelete}
        className={classes.chip}
      />
    </div>
  );
}

See this code sandbox for a working version.