reactjs - 如何通过点击 material-ui 芯片去除灰色？

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 时遇到了同样的问题。我想你可以对芯片组件做同样的事情，只需将 MuiIconButton 更改为 MuiChip(也可以选择 root):

Override MaterialUI Component Focus

让我知道这是否适合您。