<p dir="auto">Issues with styling when using JSS expand syntax like <code class="notranslate">padding: [40, 40]</code>.</p>
<p dir="auto"><strong>Beta 21</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/31106469/34233152-ee899640-e5a0-11e7-9ca5-dc25b0545ea8.png"><img src="https://user-images.githubusercontent.com/31106469/34233152-ee899640-e5a0-11e7-9ca5-dc25b0545ea8.png" alt="beta21" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Beta 24</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/31106469/34233155-f4b0f932-e5a0-11e7-90e3-05c91989a4a1.png"><img src="https://user-images.githubusercontent.com/31106469/34233155-f4b0f932-e5a0-11e7-90e3-05c91989a4a1.png" alt="beta24" style="max-width: 100%;"></a></p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">JSS expanded syntax should affect styling in the same manner as regular styles. I would expect that both red and blue boxes render exactly the same given that they're technically applying the same styles.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">In both beta 21 and beta 24 part (or all) of the styling doesn't apply properly. Notice the differences in padding between the red (JSS expand) and blue (regular styles) boxes</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Beta 24 example: <a href="https://codesandbox.io/s/mq76424onx" rel="nofollow">https://codesandbox.io/s/mq76424onx</a><br>
Beta 21 example: <a href="https://codesandbox.io/s/myznn5lmk9" rel="nofollow">https://codesandbox.io/s/myznn5lmk9</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">This impacts both material UI components, or custom components using JSS expand.</p>
<h3 dir="auto">Problem description</h3>
<p dir="auto">When loading a fresh SelectField component and giving it the list of options, the browser renders and shows the first item as selected. If you inspect the actual value, it still <code class="notranslate">null</code>.</p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto"><a href="http://www.material-ui.com/#/components/select-field" rel="nofollow">http://www.material-ui.com/#/components/select-field</a><br>
Take a look at the Floating Label Text example</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 0.15.3</li>
<li>React: 15.3.0</li>
<li>Browser: 52.0.2743.82 (64-bit)</li>
</ul>
<h3 dir="auto">Screenshot:</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1789219/17571869/2ee61f2a-5f0f-11e6-808b-6beee64eed44.png"><img width="676" alt="screen shot 2016-08-10 at 3 27 56 pm" src="https://cloud.githubusercontent.com/assets/1789219/17571869/2ee61f2a-5f0f-11e6-808b-6beee64eed44.png" style="max-width: 100%;"></a></p>