如何消除 Material UI Chip 组件中的悬停、活动、焦点灰色答案

【问题标题】：How to eliminate hover, active, focus gray color in Material UI Chip component如何消除 Material UI Chip 组件中的悬停、活动、焦点灰色
【发布时间】：2018-05-28 18:21:04
【问题描述】：

我用几种颜色（绿色、黄色、蓝色等）实现了芯片，默认情况下，MUI 芯片带有灰色悬停/活动/焦点 CSS 样式。我需要在 MUI 芯片组件中消除这种悬停/活动/聚焦灰色背景颜色。所以再一次，我不想用另一种颜色替换灰色，而是要完全消除以下 CSS 样式：

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),
  },
},

最后，这可以通过覆盖所有需要的颜色的芯片组件来完成，但必须有更好的方法。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您可以创建一个工厂函数，该函数返回具有您选择的颜色的组件并覆盖问题中突出显示的行为：

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;

您可以通过调用此函数即时生成新品种，而不是为每种颜色创建单独的组件：

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

查看此code sandbox 以获得工作版本。

【讨论】：