css - 更改 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>
  );
}