<p dir="auto">The docs (<a href="https://material-ui.com/customization/css-in-js/#css-injection-order" rel="nofollow">https://material-ui.com/customization/css-in-js/#css-injection-order</a>) suggest using a HTML Comment Node as a custom jss insertion point to control the order in which CSS is injected.</p>
<p dir="auto">This does not work if users strip out HTML comments as part of their build process.</p>
<p dir="auto"><code class="notranslate">create-react-app</code>, which currently strips HTML comments when creating the production build, can only be reconfigured to not strip comments if "ejected", which is undesirable for many users.</p>
<p dir="auto">A work-around is to reference a node other than a comment node as the jss insertion point.</p>
<p dir="auto">eg</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const insertionPoint = document.getElementById('insertion-point-jss')
jss.setup({ insertionPoint })"><pre class="notranslate"><code class="notranslate">const insertionPoint = document.getElementById('insertion-point-jss')
jss.setup({ insertionPoint })
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;head&gt;
    &lt;noscript id=&quot;insertion-point-jss&quot;&gt;&lt;/noscript&gt;
    &lt;title&gt;I am the last element&lt;/title&gt;
  &lt;/head&gt;"><pre class="notranslate"><code class="notranslate">  &lt;head&gt;
    &lt;noscript id="insertion-point-jss"&gt;&lt;/noscript&gt;
    &lt;title&gt;I am the last element&lt;/title&gt;
  &lt;/head&gt;
</code></pre></div>
<p dir="auto">As create-react-app + material-ui is a pretty common combination I think it could be worth highlighting this problem in the docs, or providing guidance that doesn't rely on html comments.</p>
<p dir="auto">Thoughts on a less hacky solution?</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">If docs are followed CSS injection order should be honoured when using create-react-app</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">If HTML Comments are stripped (eg by create-react-app default config) then injection order is broken.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">in a <code class="notranslate">react-scripts</code> app</p>
<ol dir="auto">
<li><code class="notranslate">yarn run build</code></li>
</ol>
<h2 dir="auto">Context</h2>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="232699509" data-permission-text="Title is private" data-url="https://github.com/styled-components/styled-components/issues/860" data-hovercard-type="issue" data-hovercard-url="/styled-components/styled-components/issues/860/hovercard?comment_id=357964487&amp;comment_type=issue_comment" href="https://github.com/styled-components/styled-components/issues/860#issuecomment-357964487">styled-components/styled-components#860 (comment)</a></p>
<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.x</td>
</tr>
<tr>
<td>React</td>
<td>x.x</td>
</tr>
<tr>
<td>browser</td>
<td>x.x</td>
</tr>
<tr>
<td>create-react-app</td>
<td>1.x</td>
</tr>
</tbody>
</table>
<p dir="auto">Since the docs are mostly out of date, are there any canonical examples for the beta?</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>
<p dir="auto">E.g., <a href="https://material-ui.com/demos/app-bar" rel="nofollow">https://material-ui.com/demos/app-bar</a> points to the v1.0.0-beta.22 docs (same version I'm using), but the inline examples (expanding "&lt;&gt;") are out of date. E.g.,</p>
<p dir="auto">import { withStyles } from 'material-ui/styles';<br>
should be:<br>
import withStyles from 'material-ui/styles/withStyles';<br>
OR<br>
import { withStyles } from 'material-ui';</p>
<p dir="auto">Of course it's beta and I'm fine looking through the source, but having at least one non-broken example would be really useful -- and I would think cut down the bug traffic? (e.g., how are you testing this yourselves other than unit tests?)</p>
<p dir="auto">Thanks for the package.</p>