Изменение цвета компонента чипа пользовательского интерфейса материала при нажатии не работает - PullRequest
Новая
       7

Изменение цвета компонента чипа пользовательского интерфейса материала при нажатии не работает

1 голос
/ 23 апреля 2019

У меня есть несколько чипов, которые работают как вкладки на моей странице.Они являются взаимоисключающими и меняют цвет при выборе.Как мне этого добиться.Я думаю, что это как-то связано с вариантом = "обрисованным в общих чертах".Я хочу, чтобы исходный чип имел «контур» и onClick, он должен иметь фон 

const theme = createMuiTheme({
      overrides: {
        MuiChip: {
          clickableColorSecondary: {
            '&:hover, &:focus': {
              backgroundColor: 'red',
            },
            '&:active': {
              backgroundColor: 'green',
            },
          },
        }
      }
    });

Chips 

<Badge badgeContent={4} color="secondary" classes={{ badge: classes.badge }} >
      <Chip
        label="Label 1"
        clickable
        className={classes.chip}
        color="secondary"
        variant="outlined"
        onClick={handleClick}
      />
    </Badge>

<Badge badgeContent={4} color="secondary" classes={{ badge: classes.badge }} >
      <Chip
        label="Label 2"
        clickable
        className={classes.chip}
        color="secondary"
        variant="outlined"
        onClick={handleClick}
      />
    </Badge>

<Badge badgeContent={4} color="secondary" classes={{ badge: classes.badge }} >
      <Chip
        label="Label 3"
        clickable
        className={classes.chip}
        color="secondary"
        variant="outlined"
        onClick={handleClick}
      />
    </Badge>

Это не отменяет выбранный стиль чипа, как я ожидал

Я также пытался обернуть его в другую тему 

const chipsTheme = createMuiTheme({
    overrides: {
      MuiChip: {
        clickableColorPrimary: {
          '&:hover, &:focus': {
            backgroundColor: 'red',
          },
          '&:active': {
            backgroundColor: 'green',
          },
        },
        clickableColorSecondary: {
          '&:hover, &:focus': {
            backgroundColor: 'red',
          },
          '&:active': {
            backgroundColor: 'green',
          },
        }
      }
    }
  });

<MuiThemeProvider theme={chipsTheme}>
        <Chip
            label="INVENTORY"
            clickable
            className={classes.chip}
            color="secondary"
            variant="outlined"
            onClick={handleClick}
        />
    </MuiThemeProvider>

Но это не меняет его стиль вообще.Как я могу изменить его цвет при щелчке, а также очистить другие цвета при нажатии на другой чип?

...