Here are the default background-color styles for the outlined version of Chip:
/* Root element styles for `variant="outlined"`. */
outlined: {
backgroundColor: 'transparent',
'$clickable&:hover, $clickable&:focus, $deletable&:focus': {
backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
},
The code snippet above uses $clickable& to represent
.MuiChip-clickable.MuiChip-outlined
. Notice how it includes two class names plus a pseudo-class (
:hover or
:focus), giving it higher
specificity than a single class name override rule. To successfully override these default styles, your custom rule must match or exceed this level of specificity.
An easy way to achieve this is by doubling the &, effectively duplicating the generated class name in the rule and boosting its specificity to align with the defaults.
For instance, consider the following 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>
);
}
https://codesandbox.io/s/override-outlined-chip-background-i9jz9?fontsize=14&hidenavigation=1&theme=dark