Блог

Главная - Вопросы по программированию - Изменение цвета компонента микросхемы пользовательского интерфейса Material при нажатии не работает

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

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

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

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

Чипы 

 <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: {
          'amp;:hover, amp;:focus': {
            backgroundColor: 'red',
          },
          'amp;:active': {
            backgroundColor: 'green',
          },
        },
        clickableColorSecondary: {
          'amp;:hover, amp;:focus': {
            backgroundColor: 'red',
          },
          'amp;:active': {
            backgroundColor: 'green',
          },
        }
      }
    }
  });

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

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

Комментарии:

1. Кажется, это работает здесь: codesandbox.io/s/94451ppw5y . Он становится зеленым, когда «активен» (т. Е. При нажатии на него — при нажатой кнопке мыши). Вы пытаетесь, чтобы один из них оставался «выбранным» после завершения нажатия на него? Если да, то как вы отслеживаете, какой из них «выбран»?

2. Я думаю, я могу просто изменить локальное состояние и сделать что-то в строках handleClick = event => { this.setState({ color: ‘primary’, variant: ‘default’ }); };