<h3 dir="auto">Problem description</h3>
<p dir="auto">The v1 documentation <a href="https://material-ui-1dab0.firebaseapp.com/customization/overrides/" rel="nofollow">here</a> states that, "The CSS injected by Material-UI to style a component has the lowest specificity possible as the  is injected at the top of the ". However, I am observing locally that the styles are being injected at the <em>bottom</em> of . I do not have any custom configuration set for JSS, so I don't believe anything in my codebase would be causing the difference in behavior.</p>
<p dir="auto">I'm trying to follow the JSS docs to customize the insertion point via a comment, but everything I do within <code class="notranslate">jss.setup()</code> seems to be overriden with a MUIThemProvider that uses<code class="notranslate">muiThemeProviderFactory.js</code>, which I don't have direct access to.</p>
<p dir="auto">The docs examples use <code class="notranslate">getContext</code>, but that seems like a <em>lot</em> of extra boilerplate just to set a CSS insertion point. Does anyone have any advice on how I can get the JSS styles to actually render at the bottom of the <code class="notranslate">&lt;head /&gt;</code> element?</p>
<p dir="auto">I'm reporting this here instead of SO, because I believe that the documentation is incorrect, and could use some examples for what I would expect to be a common use case for MUI consumers that don't also rely on JSS as their primary styling solution.</p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: 1.0.0-beta.6</li>
<li>React: 15.6.1</li>
<li>Browser: Chrome latest</li>
</ul>
<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">Positioning of the IconButton as an InputAdornment should be the same on IE11 as it is on other browsers.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The IconButton is rendered too low and further to the right (for a right adornment).</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>An example of this is on the material-ui-pickers doc site (<a href="https://material-ui-pic.firebaseapp.com/" rel="nofollow">https://material-ui-pic.firebaseapp.com/</a>)</li>
<li>Source to produce this is here: <a href="https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/lib/src/_shared/DateTextField.jsx">https://github.com/dmtrKovalenko/material-ui-pickers/blob/master/lib/src/_shared/DateTextField.jsx</a></li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1242475/36368662-3c41507e-1550-11e8-8930-8e2102d8a4f2.png"><img src="https://user-images.githubusercontent.com/1242475/36368662-3c41507e-1550-11e8-8930-8e2102d8a4f2.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">The horizontal positioning issue can also be seen on the example on material-ui.com. However, the vertical positioning seems to come from using an IconButton.</p>
<p dir="auto">The horizontal issue is because width: 100% is set on the input element. Removing this and setting flex-grow: 1 fixes this.</p>
<p dir="auto">The vertical issue can be fixed by setting a fixed height of 48px on the input adornment.</p>
<h2 dir="auto">Context</h2>

<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>1.0.0-beta.33</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>IE11</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>