Question

尝试用material-ui chips.找出问题，当您单击它们时，它们将显示为灰色，直到您再次单击其他位置为止。我希望能够单击并拥有我的active类，然后再次单击并拥有我的inactive类。我不知道为什么中间会有灰色的台阶。

<div className={classes.root}>
        {this.props.chipData.map(data => {

          return (
            <Chip
              key={data.key}
              clickable={false}
              clickableColorSecondary="white"
              label={data.label}
              onClick={this.props.toggleChipProperty(data.key)}
              className={(data.showing ? classes.active : classes.inactive )} 

            />
          );
        })}
      </div>

CSS：

  active: {
    backgroundColor:"#4054B2",
    color:"white",
     height:"20px"
  },
  inactive: {
    backgroundColor:"white",
    color:"#575b6e",
    border:"1px solid #8080806e",
     height:"20px"
  }
});

此图显示灰色部分。单击后，按钮上的灰色显示，然后单击关闭，最终显示正确的颜色。我发现这不直观。我想单击并使其简单地切换。

enter image description here

Answer 1

我对Material-UI的Select Component有相同的问题。我想您可以对Chip Component进行相同的操作，只需将MuiIconButton更改为MuiChip（也许也选择root）即可：

Override MaterialUI Component Focus

让我知道这是否对您有用。

Answer 2

我在选择组件上遇到了同样的问题。我尝试使用Konstantinos的解决方案，最终通过两个步骤解决了这个问题：

＃1创建一个新主题

const theme1 = createMuiTheme({
overrides: {
    MuiSelect: {
        select: {
            '&:focus': {
                backgroundColor: 'none'
            }
        }
    }
}
});

＃2使用主题提供程序包装组件

<MuiThemeProvider theme={theme1}>
        <Select...
</MuiThemeProvider>

如何通过单击Material-ui芯片去除灰色的颜色？

2 个答案: