<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>
<p dir="auto">Related to closed ticket <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="259991981" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8338" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8338/hovercard" href="https://github.com/mui/material-ui/issues/8338">#8338</a>.</p>
<h2 dir="auto">Expected Behaviour</h2>
<p dir="auto">The original Popover component (pre v1) had a <code class="notranslate">useLayerForClickAway</code> attribute, which toggled whether an invisible underlying element will be used to prevent clicks.</p>
<p dir="auto">Setting this attribute to <code class="notranslate">false</code> allowed us to control the popover with mouseOver &amp; mouseOut events.</p>
<h2 dir="auto">Current Behaviour</h2>
<p dir="auto">This <code class="notranslate">useLayerForClickAway</code> attribute no longer exists in V1.<br>
Once the popover is displayed, the invisible element appearing causes a mouseOut event to fire, which then hides the popup</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">See <a href="https://codesandbox.io/s/oqmrwrpm2z" rel="nofollow">https://codesandbox.io/s/oqmrwrpm2z</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.17</td>
</tr>
<tr>
<td>React</td>
<td>16.0.0</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>
<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">Okay, I figured out the cause of the difficulty I've been having when using <code class="notranslate">material-ui</code> and <code class="notranslate">injectSheet</code> in the same project.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/oliviertassinari/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/oliviertassinari">@oliviertassinari</a> I'm wondering if it <code class="notranslate">material-ui</code> could avoid using a custom <code class="notranslate">generateClassName</code> function.  I don't really see why it wouldn't work with the default implementation provided by <code class="notranslate">jss</code>.  If you want to ensure that <code class="notranslate">material-ui</code> components get <code class="notranslate">Mui</code> in the class names, perhaps you could customize the <code class="notranslate">classNamePrefix</code> option of <code class="notranslate">StyleSheet</code> instead?</p>
<p dir="auto">If you decide to keep the custom <code class="notranslate">generateClassName</code> with my PR fix (beware, it makes interoperability and SSR more difficult) then I can make another PR to document how to achieve full interoperability with <code class="notranslate">injectSheet</code>.</p>
<h2 dir="auto">Expected Behavior</h2>
<ul dir="auto">
<li>SSR generates valid class names</li>
<li>Client generates the same class names (assuming there's a way to configure it to do so)</li>
</ul>
<h2 dir="auto">Current Behavior</h2>
<h4 dir="auto">SSR generates invalid class names with spaces like <code class="notranslate">Component- Unthemed- Dynamic-root-2</code></h4>
<p dir="auto">This is because <code class="notranslate">styleSheet.options.meta</code> created by <code class="notranslate">injectSheet</code> is something like <code class="notranslate">Component, Unthemed, Dynamic</code> and <code class="notranslate">material-ui</code> doesn't collapse the whitespace:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1448194/34419063-532d72e8-ebc7-11e7-9b5f-443f3525b583.png"><img src="https://user-images.githubusercontent.com/1448194/34419063-532d72e8-ebc7-11e7-9b5f-443f3525b583.png" alt="image" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1448194/34419070-5e8ef594-ebc7-11e7-9077-27497f45e70a.png"><img src="https://user-images.githubusercontent.com/1448194/34419070-5e8ef594-ebc7-11e7-9077-27497f45e70a.png" alt="image" style="max-width: 100%;"></a></p>
<h4 dir="auto">Client doesn't generate the same class names anyway</h4>
<p dir="auto">This is because <code class="notranslate">withStyles</code> uses <code class="notranslate">material-ui</code>'s custom <code class="notranslate">generateClassName</code> function by default, but <code class="notranslate">injectSheet</code> doesn't.</p>
<h2 dir="auto">Workaround</h2>
<ul dir="auto">
<li>don't use <code class="notranslate">createGenerateClassName</code> from <code class="notranslate">material-ui</code> in SSR or client</li>
<li>Wrap root component on the client side in a <code class="notranslate">&lt;JssProvider&gt;</code> (without any props).  This puts <code class="notranslate">jss</code>' default <code class="notranslate">generateClassName</code> function on context and <code class="notranslate">withStyles</code> picks it up and uses it instead of <code class="notranslate">material-ui</code>'s custom <code class="notranslate">generateClassName</code>.</li>
</ul>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Clone this repo and follow the instructions in the README:</p>
<p dir="auto"><a href="https://github.com/jedwards1211/mui-jss-issue">https://github.com/jedwards1211/mui-jss-issue</a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">Since <code class="notranslate">withStyles</code> doesn't provide a way to do dynamic styles from <code class="notranslate">props</code>, I was trying to use <code class="notranslate">injectSheet</code> from <code class="notranslate">react-jss</code>.  But the <code class="notranslate">StyleSheets</code> created by <code class="notranslate">injectSheet</code> trip up <code class="notranslate">material-ui</code>'s <code class="notranslate">createGenerateClassName</code> function.</p>
<p dir="auto">I <em>think</em> it's possible to pass a <code class="notranslate">generateClassName</code> function to <code class="notranslate">injectSheet</code>, which would solve the problem of client/server inconsistency (but not the invalid class names).  However I don't think this is ideal because one has to pass <code class="notranslate">generateClassName</code> into every usage of <code class="notranslate">injectSheet</code>.</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.25</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>any</td>
</tr>
<tr>
<td>jss</td>
<td>9.3.3</td>
</tr>
<tr>
<td>jss-preset-default</td>
<td>4.0.1</td>
</tr>
<tr>
<td>react-jss</td>
<td>8.1.0</td>
</tr>
</tbody>
</table>