reactjs - 如何消除Material UI Chip组件中的hover、active、focus灰色

Question

我有多种颜色(绿色、黄色、蓝色等)的芯片，默认情况下，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),
  },
},

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

Answer 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对于工作版本。