title: Modifying React style object seems to corrupt dom styles
body: <p>I'm pretty sure I found a React bug but I want to post the question here before submitting an issue on Github.</p>
  
  <p>I'll link to a reduced test case, but here's the data flow:</p>
  
  <ol>
  <li><p>You have a React component, and it has a <code>style={this.state.style}</code> attribute assigned to it.</p></li>
  <li><p>You <code>setState</code> so that the style object is now</p>
  
  <pre><code>style={
    border: "1px solid red"
  }
  </code></pre></li>
  <li><p>You <code>setState</code> to add a <code>borderColor</code> to this style property</p>
  
  <pre><code>style={
    border: "1px solid red"
    borderColor: "blue"
  }
  </code></pre></li>
  <li><p>Later on, you <code>setState</code> to remove the <code>borderColor</code></p>
  
  <pre><code>style={
    border: "1px solid red"
  }
  </code></pre></li>
  </ol>
  
  <p>What happens if you do this? Well, your border turns black. If you inspect the DOM to see the styles applied to your element, it will look like this:</p>
  
  <pre><code>border-width: 1px;
  border-style: solid;
  border-image: initial;
  </code></pre>
  
  <p>Needless to say, this is not what I expect to happen. It seems that React is doing some kind of DOM style-translation and it's not behaving appropriately. Can anyone explain why this is happening?</p>
  
  <p><a href="https://codepen.io/danielvaughn/pen/jeqqKV" rel="nofollow noreferrer">Here is a codepen</a> with a reduced test case demonstrating the behavior.</p>