MUI's Chip Component change background color when selected-CodePudding

I'm working in react and using MUI's Chip component. I would like to make it so that it will change the background color once it is selected instead of the generic default color.

I have tried using the 'global styles', if you will to change the background color when user clicks on the component.

Please see below for what I mean:

tokenChip: {
    height: '40px',
    width: '125px',
    fontSize: '18px',
    '&:hover': {
      backgroundColor: 'red'
    }

      <Chip
        className={ classes.tokenChip }
        clickable
classes={{ clickableColorPrimary: 'red', clickableColorSecondary:'blue'
        avatar={<Avatar
          style={{ padding: '2px' }}
          alt="Clickable"
          />}
        label="Clickable"
        variant="filled" />

I tried to see if the hover attribute in the CSS object did anything, but it didn't.

CodePudding user response：

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.