<p dir="auto">I would like to prevent MUI from optimising classNames:</p>
<ul class="contains-task-list">
<li>
<p dir="auto">development: <code class="notranslate">.MuiAppBar-root-12</code></p>
</li>
<li>
<p dir="auto">production: `.c12``<br>
documentation: <a href="https://material-ui.com/customization/css-in-js/#class-names" rel="nofollow">https://material-ui.com/customization/css-in-js/#class-names</a></p>
</li>
<li class="task-list-item">
<p dir="auto"><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.</p>
</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">With <code class="notranslate">NODE_ENV=production</code> MUI optimizes the names, which is cool, but I am using MUI with <a href="https://github.com/kriasoft/react-starter-kit">https://github.com/kriasoft/react-starter-kit</a> and (it may be configuration noobness), but I am seeing the following code being generated. Class names in HTML optimised, but styles not optimised:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/463975/32416440-fa5a7efe-c240-11e7-96a4-e30cba9e03c8.png"><img src="https://user-images.githubusercontent.com/463975/32416440-fa5a7efe-c240-11e7-96a4-e30cba9e03c8.png" alt="screen shot 2017-11-05 at 15 46 43" style="max-width: 100%;"></a></p>
<p dir="auto">I've been through the documentation trying to figure out how to disable the class name optimisation but can't find anything. Should there be a configuration flag, or am I missing something? As a side note I'm doing this side project to cut some learning curve, so I may be missing something obvious.</p>
<h2 dir="auto">Your Environment</h2>
<p dir="auto">current dependencies, is mostly the stuff from here <a href="https://github.com/kriasoft/react-starter-kit">https://github.com/kriasoft/react-starter-kit</a>, except with an added material ui:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
    &quot;babel-polyfill&quot;: &quot;7.0.0-beta.3&quot;,
    &quot;bluebird&quot;: &quot;^3.5.1&quot;,
    &quot;body-parser&quot;: &quot;^1.18.2&quot;,
    &quot;classnames&quot;: &quot;^2.2.5&quot;,
    &quot;cookie-parser&quot;: &quot;^1.4.3&quot;,
    &quot;core-js&quot;: &quot;^2.5.1&quot;,
    &quot;express&quot;: &quot;^4.16.2&quot;,
    &quot;express-graphql&quot;: &quot;^0.6.11&quot;,
    &quot;express-jwt&quot;: &quot;^5.3.0&quot;,
    &quot;graphql&quot;: &quot;^0.11.7&quot;,
    &quot;history&quot;: &quot;^4.7.2&quot;,
    &quot;install&quot;: &quot;^0.10.1&quot;,
    &quot;isomorphic-style-loader&quot;: &quot;^4.0.0&quot;,
    &quot;jsonwebtoken&quot;: &quot;^8.1.0&quot;,
    &quot;material-ui&quot;: &quot;^1.0.0-beta.18&quot;,
    &quot;node-fetch&quot;: &quot;^1.7.3&quot;,
    &quot;normalize.css&quot;: &quot;^7.0.0&quot;,
    &quot;passport&quot;: &quot;^0.4.0&quot;,
    &quot;passport-facebook&quot;: &quot;^2.1.1&quot;,
    &quot;pretty-error&quot;: &quot;^2.1.1&quot;,
    &quot;prop-types&quot;: &quot;^15.6.0&quot;,
    &quot;query-string&quot;: &quot;^5.0.1&quot;,
    &quot;ramda&quot;: &quot;^0.25.0&quot;,
    &quot;react&quot;: &quot;^16.0.0&quot;,
    &quot;react-dom&quot;: &quot;^16.0.0&quot;,
    &quot;rss-parser&quot;: &quot;^2.10.6&quot;,
    &quot;sequelize&quot;: &quot;^4.17.2&quot;,
    &quot;serialize-javascript&quot;: &quot;^1.3.0&quot;,
    &quot;source-map-support&quot;: &quot;^0.5.0&quot;,
    &quot;universal-router&quot;: &quot;^4.3.0&quot;,
    &quot;whatwg-fetch&quot;: &quot;^2.0.3&quot;,
    &quot;yarn&quot;: &quot;^1.2.1&quot;
  }"><pre class="notranslate"><code class="notranslate">"dependencies": {
    "babel-polyfill": "7.0.0-beta.3",
    "bluebird": "^3.5.1",
    "body-parser": "^1.18.2",
    "classnames": "^2.2.5",
    "cookie-parser": "^1.4.3",
    "core-js": "^2.5.1",
    "express": "^4.16.2",
    "express-graphql": "^0.6.11",
    "express-jwt": "^5.3.0",
    "graphql": "^0.11.7",
    "history": "^4.7.2",
    "install": "^0.10.1",
    "isomorphic-style-loader": "^4.0.0",
    "jsonwebtoken": "^8.1.0",
    "material-ui": "^1.0.0-beta.18",
    "node-fetch": "^1.7.3",
    "normalize.css": "^7.0.0",
    "passport": "^0.4.0",
    "passport-facebook": "^2.1.1",
    "pretty-error": "^2.1.1",
    "prop-types": "^15.6.0",
    "query-string": "^5.0.1",
    "ramda": "^0.25.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "rss-parser": "^2.10.6",
    "sequelize": "^4.17.2",
    "serialize-javascript": "^1.3.0",
    "source-map-support": "^0.5.0",
    "universal-router": "^4.3.0",
    "whatwg-fetch": "^2.0.3",
    "yarn": "^1.2.1"
  }
</code></pre></div>
<p dir="auto">Any help or direction would be great. And thanks for the hand.</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">Expected Behavior</h2>
<p dir="auto">Select should display the placeholder, like a regular input.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Using the placeholder property on Select has no visible effect. I looked into the code and it seems this property is being forwarded to the underlying <code class="notranslate">&lt;input hidden /&gt;</code> element, hence it does not appear.</p>
<p dir="auto"><a href="https://codesandbox.io/s/ol4pln434q" rel="nofollow">https://codesandbox.io/s/ol4pln434q</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.0.0-beta.16</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome 62.0.3202.62</td>
</tr>
</tbody>
</table>