<p dir="auto">I think it would be a good idea to tune Material-UI into a truly responsive mobile-first framework. Responsive imagery using the HTML <code class="notranslate">srcset</code> and <code class="notranslate">sizes</code> attributes could greatly improve bandwidth usage and quality of service.</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/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">When setting the height of the button itself, it breaks the vertical centering of the label. I've tried a few workarounds around setting the label height or line-height, or putting the button in a div of smaller height, but those haven't worked. Is there a known solution for this or am I incorrectly setting the button height in the style prop?<br>
<code class="notranslate">&lt;FlatButton label="Cash Out" disabled={true} labelStyle={{ fontSize: '10px', fontWeight: 300, lineHeight: '25px', textTransform: 'none', width: '50px' }} style={{ border: '1px solid gray', borderRadius: '5px', color: 'gray', height: '25px', marginLeft: '15px' }} /&gt;</code></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/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.18.7</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>browser</td>
<td>Safari 11</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>