Material-ui: JSS Cannot target child to perform some basic css operations

[mnemanja]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

One should be able to create something like:
List item has a child which is hidden by default. When the List item gets hovered, the child gets displayed.

from here: http://cssinjs.org/jss-nested/?v=v6.0.1#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet

The component in question is this:
<ListItemSecondaryAction className={classes.actionsContainer}>

Current Behavior

Trying to change a style of a child on parent hover. It doesn't seem to work. I might as well be using it wrong though...

Should I do something to enable this behavior? As I understood the documentation the jss-nested should already be available?

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI |1.0.0-beta.41|
| React |16.3.0|
| browser | |
| etc | |

[oliviertassinari]

@mnemanja Do you have a live example so I can play with it?

[mnemanja]

Unfortunately no :(
Basically, it works when I hover the checkboxItem, but not the actionsContainer.

I'm not sure how to debug if the code is applied anywhere or not?

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

@mnemanja It's too much work for me without a reproduction. I can only make guesses. I'm gonna assume it's a usability issue and point you to StackOverflow.

[mnemanja]

@oliviertassinari I understand, no problem.

By the way, the problem was that the <ListItem> classes added with className actually get applied to the element that gets generated under the <li> item, but not the <li> itself. For that I've used ContainerProps={{ className: classes.listItem }} and declared the hover under the listItems style.

Sorry for taking your time for this trivial problem. I hope this might help someone else who encounters the same problem.

Cheers ;)

[HebaruSan]

@mnemanja, your solution worked for me and saved me many hours and much frustration! Thank you for sharing!