title: React inline style with ternary
body: <p>Having a Checkbox element like this:</p>
  
  <pre><code>&lt;Checkbox
      checked={this.props.someValues.indexOf(myValue) &gt; -1}
  /&gt;
  </code></pre>
  
  <p>When that index has a positive value the checkbox gets checked.</p>
  
  <p>I want to add different colors to the checkbox, for example if it is unchecked - blue, checked - red.</p>
  
  <p>So I tried to do it like this: </p>
  
  <pre><code>&lt;Checkbox
     checked={this.props.someValues.indexOf(myValue) &gt; -1}
     {(this.props.someValues.indexOf(myValue) &gt; -1) ? style={{ color: 'red' }} : style={{ color: 'blue' }}}
     /&gt;
  </code></pre>
  
  <p>but it doesn't work.</p>
  
  <p>Another try:</p>
  
  <pre><code>&lt;Checkbox
     checked={this.props.someValues.indexOf(myValue) &gt; -1}
     style={(this.props.someValues.indexOf(myValue) &gt; -1) ? {{ color: 'red' }} : {{ color: 'blue' }} }
     /&gt;
  </code></pre>
  
  <p>Is it possible to set the style inline with ternary operators and I'm doing it wrong or should I try a different way?</p>