This is codesandbox example to change color for Chip and to add hover color. I have added 2 elements, one with color and one without color property. https://codesandbox.io/s/chip-https-stackoverflow-com-questions-69652571-material-uis-chip-component-change-background-color-when-it-is-selected-cv8ud?file=/src/App.js

import "./styles.css";
import {Chip} from '@material-ui/core';


export default function App({classes}) {

  const handleClick = () => {
    alert('You clicked the Chip.');
  };
  return (
    <div>
      <Chip
        className="tokenChip" 
        label="Clickable"
        onClick={handleClick}
      />  
      <Chip
        className="tokenChip2" 
        label="Clickable"
        color="primary"
        onClick={handleClick}
      /> 
    </div>
  );
}
.tokenChip {
  background-color: pink;
  width: 100px;
}
.MuiChip-clickable:hover {
    background-color: yellow;
}
.MuiChip-clickableColorPrimary:hover {
  background-color: black;
}

To read more on Chip - https://mui.com/components/chips/

You can change the Chip following props based on the selected state to control its display (See this interactive example):

• color: Change the color of the Chip.
• variant: Change the border color or background color of the Chip using the color prop above.
• deleteIcon: Display the suffix icon.
• onDelete: Pass an empty function to show the suffix icon, if it's empty, the icon is hidden.

const [selected, setSelected] = React.useState(false);

return (
  <Chip
    onClick={() => setSelected((s) => !s)}
    onDelete={selected && (() => {})}
    color={selected ? "primary" : "default"}
    variant={selected ? "default" : "outlined"}
    deleteIcon={<Done />}
    label="Choice"
    avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  />
);