<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
feature</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
The style prop must always be an object.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The style prop could optionally accept a CSS string which would be set under the hood via <code class="notranslate">element.style.cssText = styleStr</code></p>
<p dir="auto">Based on the discussion in: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="109359892" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/5030" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/5030/hovercard?comment_id=153803552&amp;comment_type=issue_comment" href="https://github.com/facebook/react/issues/5030#issuecomment-153803552">#5030 (comment)</a></p>
<p dir="auto">Currently, we diff css properties and imperatively set individual properties for each value that differs from the previous render.  We've long claimed that "performance" was the reason, but the benchmarks don't seem to support this claim.  For instance, consider Ben's perf test (<a href="http://jsperf.com/style-vs-csstext-vs-setattribute/8" rel="nofollow">http://jsperf.com/style-vs-csstext-vs-setattribute/8</a> (from <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="25838120" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/929" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/929/hovercard" href="https://github.com/facebook/react/issues/929">#929</a>).  Realistically, there are cases where one technique is faster than the other, and vice versa.  It's probably a wash.</p>
<p dir="auto">But using <code class="notranslate">cssText</code> has several advantages over our current approach.  Most notably, it solves correctness issues related to the various css shorthand properties (as noted in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="109359892" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/5030" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/5030/hovercard" href="https://github.com/facebook/react/issues/5030">#5030</a>).  It also cleanly solves vendor prefixing, and a variety of other edge cases.  Plus, as an added bonus, it means that the React core is doing less work and is therefore simpler/cleaner/moreMaintainable.</p>