title: How to remove greyed out color with clicks on material-ui chips?
body: <p>Trying to figure something out with the <a href="https://material-ui.com/demos/chips/#chip" rel="nofollow noreferrer">material-ui chips.</a> When you click them, they hold a grey color until you click again somewhere else. I want to be able to click and have my <code>active</code> class and click again and have my <code>inactive</code> class. I can't figure out why there is a grey step in the middle.</p>
  
  <pre><code>&lt;div className={classes.root}&gt;
          {this.props.chipData.map(data =&gt; {
  
            return (
              &lt;Chip
                key={data.key}
                clickable={false}
                clickableColorSecondary="white"
                label={data.label}
                onClick={this.props.toggleChipProperty(data.key)}
                className={(data.showing ? classes.active : classes.inactive )} 
  
              /&gt;
            );
          })}
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>  active: {
      backgroundColor:"#4054B2",
      color:"white",
       height:"20px"
    },
    inactive: {
      backgroundColor:"white",
      color:"#575b6e",
      border:"1px solid #8080806e",
       height:"20px"
    }
  });
  </code></pre>
  
  <p>This image shows the grey part. You click, it shows grey on the button, then it finally shows the right color once you click off. I find this to be not intuitive. I want to click and have it simply toggle.</p>
  
  <p><a href="https://i.stack.imgur.com/5Cm60.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p><a href="https://i.stack.imgur.com/ZQmcx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQmcx.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/l2cey.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l2cey.png" alt="enter image description here"></a></p>