<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">On the server :<br>
The classname generation should occur once</p>
<p dir="auto">On the client:<br>
The classname generation should occur once</p>
<p dir="auto">Both classnames generation should match</p>
<h4 dir="auto">===========</h4>
<p dir="auto">I should be able to avoid using MuiThemeProvider at the root of my app while still be able to disable classname generation</p>
<p dir="auto">I should be able to use MUI on a route and not on another</p>
<p dir="auto">disabling classname generation should be for the whole tree, even if I got multiple sub MuiThemeProviders</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">On the server :<br>
The classname generation occur twice<br>
The first one when using apollo's getDataFromTree<br>
The second one when using reactDOMServer's renderToString</p>
<p dir="auto">On the client:<br>
The classname generation occur once, and  doesn't match the one made by the server</p>
<p dir="auto">The client classname generation matches the first server classname generation, but the classnames rendered on the react components are thoses from the servers's second classname generation</p>
<p dir="auto">This is because to disable classname generation on one of the renders, I am forced to use MuiThemeProvider at the root of the tree, so i can dynamically pass "disableStylesGeneration"</p>
<h2 dir="auto">Concerns</h2>
<p dir="auto">But what if I dont want to have MuiThemeProvider at the root of my App ?<br>
In the most cases, the visitor will only hit the home page, so no need to make the server render an useless component<br>
Also, what if I got the multiple MuiThemeProvider pattern ?</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">I made a repository to illustrate the problem</p>
<p dir="auto"><a href="https://github.com/Aetherall/MUI-issue">https://github.com/Aetherall/MUI-issue</a></p>
<h2 dir="auto">Context ( based on  <a href="https://github.com/Aetherall/MUI-issue">https://github.com/Aetherall/MUI-issue</a> )</h2>
<p dir="auto">I got a SSR app with two Pages<br>
Home : No MUI<br>
Dashboard: MUI<br>
Multiple: MUI - Multiple Nested Providers</p>
<p dir="auto">I don't want to use MuiThemeProvider at the root of the App, because it would mean useless execution for the majority of the visitors, which only visit Home</p>
<h2 dir="auto">Idea</h2>
<p dir="auto">The solution would be to make MuiThemeProvider get the "disableStylesGeneration" from context, and use that if no props are provided<br>
Then, we just have to make a  component which takes a disable bool prop<br>
The component just inject the disableStylesGeneration value in the context depending on the value of his disable prop</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>^1.0.0-beta.31</td>
</tr>
<tr>
<td>React</td>
<td>^16.2.0</td>
</tr>
<tr>
<td>react-jss</td>
<td>^8.2.1</td>
</tr>
</tbody>
</table>
<p dir="auto">I've started analyzing <code class="notranslate">material-ui</code> part (quite big as it turned out) of my application bundle. My app is very simple for now, I use not many different widgets, so I was quite surprised seeing modules like <code class="notranslate">Popover</code> inside the bundle. I've traced dependency graph and I found quite a long path from <code class="notranslate">Select</code> (which I consciously use), through <code class="notranslate">SelectInput</code> and <code class="notranslate">Menu</code> modules, to that <code class="notranslate">Popover</code> thing. Why would I need it, I asked myself, I use only native <code class="notranslate">Select</code>! Quick look at <a href="https://github.com/mui-org/material-ui/blob/v1-beta/src/Select/SelectInput.js">source code of <code class="notranslate">SelectInput</code></a> gave me the answer: module <code class="notranslate">Menu</code>, which depends on <code class="notranslate">Popover</code>, is eagerly loaded even if it's not actually used. <code class="notranslate">render</code> method of <code class="notranslate">SelectInput</code> returns early in <code class="notranslate">native</code> branch of code and this is obviously not traceable by any three-shaker.</p>
<p dir="auto">I don't have extensive experience with <code class="notranslate">material-ui</code>, so I don't know if native select is the only such case or that pattern (I mean conditional usage of component based on runtime properties) is common in the project. Are you interested in optimizaton of this? I suppose for big and large projects, using a lot of different UI components, it's not an issue at all, as that <code class="notranslate">Popover</code> component will be used in some other place eventually. For me, personally, savings are quite significant, though. Removing <code class="notranslate">Menu</code> and all its dependencies shrinks my bundle by 8% (11.5 kB gzipped).</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">I'm able to use native select component without loading bunch of components used by not-native implementation.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">No matter if I use native or custom select, I have all code required by the latter one in my bundle.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://codesandbox.io/s/p79koy741j" rel="nofollow">https://codesandbox.io/s/p79koy741j</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1434406/36341262-e3469d0e-13eb-11e8-8d6a-a217e036864c.png"><img src="https://user-images.githubusercontent.com/1434406/36341262-e3469d0e-13eb-11e8-8d6a-a217e036864c.png" alt="select" style="max-width: 100%;"></a></p>
<p dir="auto">Quite a lot of dependencies for a single native select, don't you think?</p>
<h2 dir="auto">Context</h2>
<p dir="auto">It affects performance somehow (I cannot provide you real numbers, but think of downloading 11.5 kB and parsing around 50 kB of never used JS). And performance matters, right?</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.33</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>any</td>
</tr>
<tr>
<td>etc</td>
<td>-</td>
</tr>
</tbody>
</table>