更改Material-UI概述的芯片焦点和悬停颜色

问题描述

悬停时尝试将样式添加到Material-UI芯片（概述的变体），但未获得预期的结果。

边框颜色为白色，但背景颜色完全不变。

所以我在质疑backgroundColor是否是正确的属性，但是还有什么呢？

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

解决方法

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

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