Change Material-UI outlined Chip focus and hover color

Question

Trying to add styles to a Material-UI chip (outlined variant) upon hovering, but not getting the expected results.

The border color is white, but the background color doesn't change at all.

So I'm questioning whether backgroundColor is even the right property anymore, but what else can it be?

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

Works fine here: https://codesandbox.io/s/material-demo-forked-ku6yk?file=/demo.js. — Ryan Cogswell, Aug 10 '20 at 23:18
Forgot to mention that I'm working with the outlined variant. It doesn't seem like backgroundColor exists in those. — jenny, Aug 10 '20 at 23:39

score 12 · Accepted Answer · answered Aug 11 '20 at 00:39

Below are the default background-color styles for the outlined variant of 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),
      },

In the styles above, $clickable& will be resolved to .MuiChip-clickable.MuiChip-outlined. The important aspect being that this rule is specified using two class names in addition to the pseudo-class (:hover or :focus). This means that these default styles will have greater specificity than the style rule you used for your override (which only uses one class name plus the pseudo-class). In order for your override to be successful, it needs to have specificity equal to or greater than the default styles.

One simple way to do this is to double the &. This causes the generated class name (which the ampersand refers to) to be specified twice in the rule -- increasing its specificity to match the default styles.

Here's a working example:

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

This saved me some stress ty – BrendanM Jun 23 '21 at 13:56 — BrendanM, Jun 23 '21 at 13:56

Change Material-UI outlined Chip focus and hover color

1 Answers1