<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">Expected Behavior</h2>

<p dir="auto">Setting the keepMounted property to true on a Modal component should either:</p>
<ul dir="auto">
<li>ensure that the Modal's children are mounted during server-side rendering, or</li>
<li>have no impact on server-side rendering at all</li>
</ul>
<p dir="auto">Because the documentation explicitly points to the keepMounted property as a means to improve SEO, my expectation is that the Modal's children <em>should</em> be present on the SSR render.  However, for my immediate use case I don't care if the children are there on SSR or not.  I just need keepMounted Modals to not break SSR.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">When setting a Modal's keepMounted property to true, the Modal component will include content during the client's initial render that was not included during the server side render, causing a warning when React renders for the first time on the client.  This is occurring because Portal does not render at all on the server side, but does render during the client's initial render.  As a result, a keepMounted=true Modal component is incompatible with SSR.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">I'm not sure if this can be reproduced on codesandbox.io since it requires SSR for demonstration.  If there is a preferred way to structure code for SSR-based issues, I'll be happy to follow whatever guidelines are provided and provide that as an edit to this issue.  This issue can be reproduced with an SSR-rendered component that contains a <code class="notranslate">&lt;Modal keepMounted={true}&gt;&lt;div&gt;Content&lt;/div&gt;&lt;/Modal&gt;</code>.</p>
<p dir="auto">As explained above, this appears to be a case of Portal rendering nothing on SSR, and something on initial client render.  It is hopefully trivial to reproduce in any dev's SSR rendering solution of choice, but if there is a preferred SSR setup for including in issue reports, let me know what that is and I can provide a basic project.</p>
<h2 dir="auto">Context</h2>

<p dir="auto">I'm building a component whose modal children animate as the modal is shown.  The keepMounted option ensures that those children are already in their proper starting positions before I toggle show to true on Modal.  If I don't use keepMounted, the children will just pop into place.  I can work around this issue using the onEnter* properties of Modal, but doing so requires orchestration of several state properties.  That works, but is less preferable than having my whole component operate off of a single isOpen boolean, which is what keepMounted=true allowed for.</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.0.0-beta.21</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62.0.3202.75</td>
</tr>
<tr>
<td>Next.js</td>
<td>4.1.4</td>
</tr>
</tbody>
</table>
<p dir="auto">I need to manage certain application states via a linear progress bar. I will have about 5-6 different colours. When I follow Styled Examples I cannot set my colours to anything other than 'primary' or 'accent', which is not what I want.</p>


<ul dir="auto">
<li>[x ] 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">Expected Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="The colour should change to the applied colour from the import."><pre class="notranslate"><code class="notranslate">The colour should change to the applied colour from the import.
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Colour does not get applied"><pre class="notranslate"><code class="notranslate">Colour does not get applied
</code></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>import { green } from 'material-ui/colors';</li>
<li>LinearProgress color={ green }</li>
</ol>
<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>latest</td>
</tr>
<tr>
<td>React</td>
<td>15.5.4</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
</tbody>
</table>