更改 Material-UI 轮廓的芯片焦点和悬停颜色

Question

尝试在悬停时向 Material-UI 芯片（轮廓变体）添加样式，但未获得预期结果。

边框颜色为白色，但背景颜色完全没有变化。

所以我在质疑 backgroundColor 是否甚至是正确的属性，但它还能是什么？

const CustomChip = withStyles(theme => ({
  root: {
    "&:hover": {
      borderColor: "white",
      backgroundColor: "green"
    }
  }
}))(Chip);

Answer 1

下面是default background-color styles 的概述变体Chip：

    /* Styles applied to the root element if `variant="outlined"`. */
    outlined: {
      backgroundColor: 'transparent',
      '$clickable&:hover, $clickable&:focus, $deletable&:focus': {
        backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
      },

在上述样式中，$clickable& 将被解析为 .MuiChip-clickable.MuiChip-outlined。重要的方面是除了伪类（:hover 或:focus）之外，还使用 ​​两个 类名指定了此规则。这意味着这些默认样式将具有比您用于覆盖的样式规则更大的specificity（仅使用一个类名加上伪类）。为了使您的覆盖成功，它需要具有等于或大于默认样式的特异性。

一种简单的方法是将& 加倍。这会导致生成的类名（与符号所指的）在规则中被指定两次——增加其特异性以匹配默认样式。

这是一个工作示例：

import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Chip from "@material-ui/core/Chip";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    justifyContent: "center",
    flexWrap: "wrap",
    "& > *": {
      margin: theme.spacing(0.5)
    }
  }
}));

const StyledChip = withStyles({
  root: {
    "&&:hover": {
      backgroundColor: "purple"
    },
    "&&:focus": {
      backgroundColor: "green"
    }
  }
})(Chip);
export default function SmallChips() {
  const classes = useStyles();

  const handleClick = () => {
    console.info("You clicked the Chip.");
  };

  return (
    <div className={classes.root}>
      <StyledChip variant="outlined" size="small" label="Basic" />
      <StyledChip
        size="small"
        variant="outlined"
        avatar={<Avatar>M</Avatar>}
        label="Clickable"
        onClick={handleClick}
      />
    </div>
  );
}