Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Related to closed ticket #8338.

Expected Behaviour

The original Popover component (pre v1) had a useLayerForClickAway attribute, which toggled whether an invisible underlying element will be used to prevent clicks.

Setting this attribute to false allowed us to control the popover with mouseOver & mouseOut events.

Current Behaviour

This useLayerForClickAway attribute no longer exists in V1.

Once the popover is displayed, the invisible element appearing causes a mouseOut event to fire, which then hides the popup

Steps to Reproduce (for bugs)

See https://codesandbox.io/s/oqmrwrpm2z

Your Environment

Tech
Version

Material-UI
1.0.0-beta.17

React
16.0.0

browser
chrome

Issue 2:
I have searched the issues of this repository and believe that this is not a duplicate.

Okay, I figured out the cause of the difficulty I've been having when using material-ui and injectSheet in the same project.

@oliviertassinari I'm wondering if it material-ui could avoid using a custom generateClassName function. I don't really see why it wouldn't work with the default implementation provided by jss. If you want to ensure that material-ui components get Mui in the class names, perhaps you could customize the classNamePrefix option of StyleSheet instead?

If you decide to keep the custom generateClassName 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 injectSheet.

Expected Behavior

SSR generates valid class names

Client generates the same class names (assuming there's a way to configure it to do so)

Current Behavior

SSR generates invalid class names with spaces like Component- Unthemed- Dynamic-root-2

This is because styleSheet.options.meta created by injectSheet is something like Component, Unthemed, Dynamic and material-ui doesn't collapse the whitespace:

Client doesn't generate the same class names anyway

This is because withStyles uses material-ui's custom generateClassName function by default, but injectSheet doesn't.

Workaround

don't use createGenerateClassName from material-ui in SSR or client

Wrap root component on the client side in a <JssProvider> (without any props). This puts jss' default generateClassName function on context and withStyles picks it up and uses it instead of material-ui's custom generateClassName.

Steps to Reproduce (for bugs)

Clone this repo and follow the instructions in the README:

https://github.com/jedwards1211/mui-jss-issue

Context

Since withStyles doesn't provide a way to do dynamic styles from props, I was trying to use injectSheet from react-jss. But the StyleSheets created by injectSheet trip up material-ui's createGenerateClassName function.

I think it's possible to pass a generateClassName function to injectSheet, 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 generateClassName into every usage of injectSheet.

Your Environment

Tech
Version

Material-UI
1.0.0-beta.25

React
16.2.0

browser
any

jss
9.3.3

jss-preset-default
4.0.1

react-jss
8.1.0