<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Feature</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Currently we can only edit the props that were passed to the component:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/619186/64222327-15f85500-cea6-11e9-9420-59ae25017fe4.png"><img src="https://user-images.githubusercontent.com/619186/64222327-15f85500-cea6-11e9-9420-59ae25017fe4.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">But the component has other props (e.g. <code class="notranslate">loading</code>, <code class="notranslate">type</code>, etc) that weren't passed to this specific instance. And we should be able to play with them in the devtools similar to how Chrome allow us to add new css:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/619186/64222438-72f40b00-cea6-11e9-92f8-2b5b72ab1b43.gif"><img src="https://user-images.githubusercontent.com/619186/64222438-72f40b00-cea6-11e9-92f8-2b5b72ab1b43.gif" alt="Kapture 2019-09-03 at 23 55 57" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Latest</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a></p>
<p dir="auto">As proposed in <a href="https://github.com/reactjs/react-future/blob/master/04%20-%20Layout/Inline%20Style%20Extension.md">React Future</a>, it would be nice to support a list of style objects in the style property. The objects would be automatically merged (in order, with the last object overriding the previous one).</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var boxStyle = {
  padding: 10,
  background: &quot;hotpink&quot;
};
var bixBoxStyle = {
  margin: 10,
  width: 300
};

&lt;div style={boxStyle} /&gt;
&lt;div style={[boxStyle, bigBoxStyle]} /&gt;
&lt;div style={[boxStyle, bigBoxStyle, {background: &quot;navy&quot;}]} /&gt;"><pre class="notranslate"><code class="notranslate">var boxStyle = {
  padding: 10,
  background: "hotpink"
};
var bixBoxStyle = {
  margin: 10,
  width: 300
};

&lt;div style={boxStyle} /&gt;
&lt;div style={[boxStyle, bigBoxStyle]} /&gt;
&lt;div style={[boxStyle, bigBoxStyle, {background: "navy"}]} /&gt;
</code></pre></div>