Question

我有一些芯片可以像页面上的标签一样工作。它们是互斥的，并且在选择时会更改颜色。我该如何实现。我认为这与“ =概述”有关。我确实希望初始芯片具有“轮廓”和onClick，它需要有背景

const theme = createMuiTheme({
      overrides: {
        MuiChip: {
          clickableColorSecondary: {
            '&:hover, &:focus': {
              backgroundColor: 'red',
            },
            '&: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: {
          '&: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>

但是它根本不会改变其样式。如何在单击时使其改变颜色，并在单击另一芯片时清除其他颜色？

单击时材料UI芯片组件的颜色更改不起作用

0 个答案: